如何仅让回车键在指定#targer-wrapper内触发执行？代码故障求助

你的代码核心问题在于逻辑细节处理不当，以及缺少对回车默认行为的阻止，导致可能出现意外干扰。以下是具体修正点和优化后的代码：

原代码存在的问题 #

• 变量value未声明，会成为全局变量，可能引发冲突
• 每次按键都会检查输入长度≥3并执行函数，这可能不是你预期的触发时机
• 未阻止回车的默认行为（比如表单自动提交），可能导致页面刷新或其他元素受影响
• 重复查询DOM节点$('input#children-input')，效率低下

优化后的代码 #

if ($('#targer-wrapper').length) {
    // 直接绑定到目标输入框，若输入框是动态生成则保留事件委托写法
    $('#targer-wrapper #children-input').on('keydown', function (e) {
        // 用$(this)获取当前输入框，避免重复DOM查询
        const inputValue = $(this).val().trim();
        const isEnter = e.which === 13 || e.keyCode === 13;

        // 按需调整逻辑：这里设置为「回车时触发」，或保留「回车/长度≥3都触发」
        if (isEnter) {
            // 阻止回车默认行为，避免表单提交等干扰
            e.preventDefault();
            functionName();
        } 
        // 若需要输入长度≥3时也触发，取消下面注释
        // else if (inputValue.length >= 3) {
        //     functionName();
        // }
    });
}

关键注意事项 #

• 如果#children-input是动态添加到页面的，保留事件委托写法：$('#targer-wrapper').on('keydown', '#children-input', function(e) {...})
• .trim()用于过滤输入的首尾空格，避免无效字符被计入长度，可根据需求移除
• 仅保留isEnter的判断逻辑，就能实现「只有在该输入框按回车才触发函数」的需求，完全不会影响其他元素

内容的提问来源于stack exchange，提问作者alench