解决type="number"的input元素无法触发Enter按键keyup事件问题

这个问题我之前也碰到过！确实有些浏览器对type="number"的输入框在keyup事件处理上有特殊逻辑，导致Enter键的事件没被正确捕获。下面给你两个靠谱的解决方案：

方案一：改用keydown事件（最推荐） #

keydown事件在按键按下的瞬间就会触发，相比keyup，它在number输入框中对Enter键的捕获稳定性更高，不会被浏览器的默认行为干扰。修改后的代码如下：

$('#inputLocation').keydown(function (e) {
    if (e.which === 13) {
        e.preventDefault(); // 阻止浏览器可能的默认表单提交行为
        $('#inputLocation').blur();
        // self.executeLocationLookup();
        alert(`Event ${e.which}`);
    }
});

加上e.preventDefault()是为了避免如果输入框在表单内时，按下Enter会触发表单提交的默认行为，干扰你的自定义逻辑。

方案二：保留keyup但调整事件绑定逻辑 #

如果你一定要用keyup，可以尝试把事件绑定到document上，通过事件委托来捕获：

$(document).keyup(function (e) {
    if (e.which === 13 && $('#inputLocation').is(':focus')) {
        $('#inputLocation').blur();
        // self.executeLocationLookup();
        alert(`Event ${e.which}`);
    }
});

不过这种方式不如直接绑定keydown简洁高效，所以更推荐第一种方案。

为什么原来的text类型可以？ #

type="text"的输入框没有数值验证、特殊键盘适配等额外逻辑，浏览器对其事件处理更直接，keyup能正常捕获Enter键；而number输入框因为要处理数值输入限制、移动端特殊键盘等，部分浏览器会调整事件触发的时机或规则，导致keyup事件丢失。

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