jQuery 'enter'-键事件处理器

Question

我在使用 'enter'-key 作为将来自 'form' 的输入附加到列表的事件时遇到问题。下面的代码有效，但只有当我按下 "cmd+enter" 组合时，它会将项目添加到我的列表并打开具有相同页面的新选项卡。

我想要实现的是，每当 'form' 字段处于焦点状态并且我按下 'enter' 键（不是 'cmd+enter' 组合键）时，该项目就会添加到列表，并且没有新的额外选项卡打开同一页面。（我正在 Firefox 48.0 和 Safari 9.1.2 中测试我的代码）

这是代码的 html 部分：

<form id="inputWindow"> Type-in here: <input type='text' name='input'></input></form>

这是代码的 jQuery 部分。

$(document).ready(function() {
 $('#inputWindow').keypress(function(event) {

if (event.which == 13){
var answer = $("input[name=input]").val();
    $('.list').append('<div class="item">' + answer + '</div>');
   });
});

Answer 1

你少了一些});jsfiddle

$(document).ready(function() {
  $('#inputWindow').keypress(function(event) {

     if (event.which == 13){
       var answer = $("input[name=input]").val();
        $('.list').append('<div class="item">' + answer + '</div>');
     }
  });
});

Answer 2

实际上使用 .submit 而不是 .keypress 事件要容易得多。页面重新加载的问题很容易通过在 html 部分添加 onsubmit="return false" 来解决。所以代码应该是这样的： html 部分：

<form id="inputWindow" onsubmit="return false"> Type-in here: <input type='text' name='input'></input></form>

jQuery 部分（假设您有 $(document).ready）：

$('#inputWindow').submit(function() {
var answer = $("input[name=input]").val();
    $('.list').append('<div class="item">' + answer + '</div>');
});

jQuery 'enter'-键事件处理器

jQuery 'enter'-key event handler

html

javascript

jquery

keypress

onkeypress