Jquery 不适用于第一次单击 html 输入中的回车键

Question

我希望当用户在输入中键入内容时，按下回车键后，jquery 会执行某些操作。 我正在使用以下代码，但第一次按回车键时出现问题。 实际上它不起作用。 问题是什么以及如何解决？

 $('.tag-input').on('change', (e) =>{ $(this).on("keydown", event=> { if(event.which == 13 && $('.tag-input').val().length>0) alert($('.tag-input').val()); }); });

 .tag-input{ width:80%; }

 <div > <input class="tag-input" placeholder="Type something then press 'Enter' key." /> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

Answer 1

问题是因为您已将keydown事件处理程序嵌套在change事件中。 嵌套事件处理程序很少是一件好事。 使用单个keydown事件处理程序：

 $('.tag-input').on('keydown', e => { const $input = $(e.target); if (e.which == 13 && $input.val().trim().length > 0) console.log($input.val()); });

 .tag-input { width: 80%; }

 <div> <input class="tag-input" placeholder="Type something then press 'Enter' key." /> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

也就是说，一个更好的方法完全是将您的input包装在一个form元素中并在其上放置required的属性。 这样你根本不需要任何 JS：

 .tag-input { width: 80%; }

 <div> <form action="/search"> <input class="tag-input" required placeholder="Type something then press 'Enter' key." /> <button type="submit">Search</button> </form> </div>

Answer 2

 $('.tag-input').bind('keyup',function() { alert(this.value); });

 .tag-input{ width:80%; }

 <div > <input class="tag-input" placeholder="Type something then press 'Enter' key." /> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>