Question

Inside Bootstrap模态窗口我有这段html：

   <form class="form-inline" role="form">
      <button  type="button" class="btn btn-training-comment btn-lg">
        <a href="#"> <img src="/img/training-icon-large.png" alt="icon" width="35" height="24"></a>
      </button>

     <div class="form-group training-comment-form-wrapper">
         <label class="sr-only" for="commentInput">Enter comment..</label>
          <input type="text" class="form-control training-comment" id="commentInput" placeholder="Enter comment">
      </div>
    </form>

我有这个Javascript代码：

$("#commentInput").onkeypress = function (e) {
    if (!e) e = window.event;
    var keyCode = e.keyCode || e.which;
    if (keyCode == '13') {
        console.log("clicked");
        addComment();
    }
};

但是没有捕获我的回车键，并且“点击”永远不会被记录。为什么会这样？

Answer 1

使用

$("#commentInput").keypress(function (e) {

代替

$("#commentInput").onkeypress = function (e) {

中的引号

if (keyCode == '13') {

没有必要。

Answer 2

我更新了你的onkeypress以使用.on（）并删除了一些其他不必要的东西。您还将数字与字符串进行比较。 keyCode =='13'。希望这可以帮助。

$(document).ready(function(){
    $(document).on('keypress','#commentInput', function (e) {
        console.log('Keyboard Key Number: '+e.which);
        if (e.which == 13) {
            e.preventDefault();
            console.log('enter was pressed. ');
        }
    });
});

此外，您应该删除嵌套在其中的锚标记。没有必要这样做。

<button  type="button" class="btn btn-training-comment btn-lg">
    <a href="#"> <img src="/img/training-icon-large.png" alt="icon" width="35" height="24"></a>
  </button>

这是一个工作小提琴：http://jsfiddle.net/FVK7f/ - （使用你的标记）在表单周围有一个额外的包装div。

编辑：更改了事件绑定以使用文档。

Javascript输入按键未被识别

2 个答案: