我如何让 javascript 函数在回车键上运行，而不是点击？

Question

当我单击此按钮时，它会运行该功能并且一切正常。

<input id="input_listName" /><button id="btn_createList">add</button>

当我点击它时，它会运行：

$('#btn_createList').click(function(){
    $('.ul_current').append($('<li>', {
         text: $('#input_listName').val()
    }));
});

当我按下它时，它会将输入中的值附加到<li>元素。

如何重做此操作，而不是单击时运行函数，而是单击“输入键”时运行该函数？

我想一起隐藏提交键。 请注意，输入和提交周围没有表单标签，因为这是一个 API 应用程序，我只是尝试过滤而不是真正提交任何内容。

Answer 1

别。

你有一个表格。 如此对待它。

 document.getElementById('input_listName').addEventListener('submit', function(e) { e.preventDefault(); const li = document.createElement('li'); li.append(this.listName.value); document.querySelector(".ul_current").append(li); // optionally: // this.listName.value = "" }, false);

 <form id="input_listName"> <input type="text" name="listName" /> <button type="submit">add</button> </form> <ul class="ul_current"></ul>

将其设为表单可提供浏览器为您提供的所有好处。 在桌面上，您可以按 Enter 提交。 在移动设备上，虚拟键盘还可以提供快速访问提交按钮。 您甚至可以向<input />元素添加required验证规则，浏览器将为您处理所有这些。

Answer 2

在event的帮助event ，您可以捕捉按下的enter (keycode = 13) 键，如我的示例所示。

有必要吗？

$('#btn_createList').keypress(function(event){
   if (event.keyCode == 13) {
    $('.ul_current').append($('<li>', {
         text: $('#input_listName').val()
    }));
    }
});

Answer 3

我想你想要的是检查按下了哪个键，对吗？

为此，您只需检查 event.keyCode === 13

因此，您的代码将类似于以下内容：

$('#btn_createList').keypress(function(event){
    if (event.keyCode === 13) {
         $('.ul_current').append($('<li>', {
             text: $('#input_listName').val()
         }));
    }    
});

希望这能解决问题！

Answer 4

<input id="input_listName" /><button id="btn_createList">add</button>这种语法在技术上是错误的，您的标签以<input>开头并以</button>结尾。 您还可以向您的函数添加一个简单的检查，如果用户尚未在输入字段中输入任何内容，则不应返回任何内容。

您还可以查看此备忘单以了解有关密钥代码的更多信息https://css-tricks.com/snippets/javascript/javascript-keycodes/

 $('#btn_createList').keypress(function(event){ if($('#input_listName').val()) { if (event.keyCode == 13) { $('.ul_current').append($('<li>', { text: $('#input_listName').val() })); } } });

 <div id="btn_createList"> <input id="input_listName" type="text"> <ul class="ul_current"> </ul> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>