输入框首次按下Enter键时Jquery事件无响应的问题排查与修复

问题描述 #

想要实现用户在input输入框输入内容后，按下Enter键时通过Jquery执行对应操作，但当前代码存在首次按下Enter键无响应的问题，相关代码如下：

原代码 #

$('.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>

问题原因 #

1. 事件绑定时机错误：你把keydown事件的绑定逻辑放在了change事件回调里。而change事件只有在输入框失去焦点且内容发生变化时才会触发，第一次按下Enter时，change事件还没触发，keydown事件根本没绑定到输入框上，所以首次按Enter毫无反应。
2. 重复绑定隐患：每次触发change事件都会重新绑定一次keydown，后续操作会导致同一事件被多次绑定，按下Enter时会重复执行回调逻辑。
3. 箭头函数的this指向问题：使用箭头函数时，this不会指向当前的输入框元素，而是继承自外部作用域，这里$(this)实际上不是目标输入框，会导致后续逻辑潜在问题。

修复方案 #

直接给输入框绑定keydown事件，不需要嵌套在change事件中，同时修正this指向问题：

修正后的代码 #

// 直接绑定keydown事件到输入框
$('.tag-input').on("keydown", function(event) {
    // 按下Enter键且输入内容不为空（trim处理避免空格触发）
    if(event.which === 13 && $(this).val().trim().length > 0) {
        alert($(this).val());
        // 可选：阻止Enter键默认的表单提交行为（输入框在表单内时建议添加）
        event.preventDefault();
    }
});

.tag-input{
  width:80%;
 }

<div >
    <input class="tag-input" placeholder="输入内容后按Enter键测试" />
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

修复说明 #

• 页面初始化后直接绑定keydown事件，确保首次按Enter就能触发逻辑。
• 使用普通函数而非箭头函数，保证this指向当前输入框元素，避免指向错误。
• 增加trim()处理输入内容，避免用户仅输入空格就触发逻辑（可根据需求调整）。
• 加入event.preventDefault()可阻止Enter键默认的表单提交行为（输入框在<form>内时推荐添加）。

内容的提问来源于stack exchange，提问作者Javad-M