Question

我有一些Javascript，其最终目标是每当按下“enter”键时，一条消息被附加到我的无序列表中。现在，任何按下的键都会被附加，而不是仅仅是“输入”键。例如，如果我键入“Y”，则按下任何其他按钮即可提交。显然，我想要的只是输入文本框的数据，通过“输入”提交。

我的HTML：

<ul id="messagebox" >
</ul>

<div>
    <input type="text" id="typetextbox" maxlength="120" autocomplete="off" />
    <button type="submit" id="submit" onblur="submit"> </button>
</div>

这是Javascript的按钮触发器：

$(document).ready(function(){
    $('#typetextbox').keypress(function (e){
        if(e.keyCode == 13 );
        $('#submit').click();
    });
});

这是用于附加消息的Javascript：

$(document).ready(function(){

    $('#submit').click(function(){
        var message = $('#typetextbox').val();
        $('#messagebox').append(message + "<br/>");
        $("#typetextbox").val("");  
    });
});

为什么不单独输入Enter按钮来提交？

Answer 1

keyCode实际上是该事件的属性，因此您必须使用e.keyCode。你也在紧密括号后面调用if(keyCode == 13 );：分号（;），立即结束if语句，所以下一行代码总是被执行。

这是正确的代码：

$('#typetextbox').keypress(function (e){
    if(e.keyCode == 13 ) $('#submit').click();
});

要将消息附加到ul元素，您应首先创建li元素，然后将其附加到ul元素。

这是正确的代码：

$('#submit').click(function() {
    var message = $('#typetextbox').val();

    if (message.replace(/ /g, '')) // If the text is not empty (e.g. nothing or only spaces)
        $('#messagebox').append( $('<li>', {text: message}) );
    $("#typetextbox").val("");  
});

顺便说一句，您不需要$(document).ready函数来执行此操作。只需将你的脚本放在dom中的textarea之后，它就能正常工作。

这里的好消息：http://jsfiddle.net/t7q4j/1/

Answer 2

将html代码更新为

<div>
    <input type="text" id="typetextbox" onkeypress="return keyPress(event)"  maxlength="120" autocomplete="off" />
    <button type="submit" id="submit" onblur="submit"> </button>
</div>

java脚本实现：

对于每个按键，将调用函数keyPress(event)。

函数定义可以是

var keyPress = function(e){
    if(e.keyCode == 13){
        send();
    }
    return true;
}

函数send包含用于更新消息框的代码

输入密钥javascript按键不起作用

2 个答案: