安卓Chrome中点击数字输入框Go按钮时隐藏移动端键盘的方法

我太懂这个痛点了！安卓Chrome下，当页面没有<form>标签时，type="number"输入框的Go按钮因为缺少默认的提交行为，确实会变成“摆设”。咱们只需要给输入框加个简单的键盘事件监听，就能实现点击Go按钮时收起键盘的效果，用jQuery很容易搞定：

基础实现代码 #

// 给所有number类型的输入框绑定键盘按下事件
$('input[type="number"]').on('keydown', function(e) {
    // 捕捉Go按钮对应的回车键（keyCode 13 或者 key值为Enter）
    if (e.key === 'Enter' || e.keyCode === 13) {
        e.preventDefault(); // 阻止可能的默认行为（避免不必要的跳转或刷新）
        $(this).blur(); // 让当前输入框失去焦点，移动端键盘就会自动收起
    }
});

适配动态生成的输入框 #

如果你的输入框是后续通过JS动态添加到页面的，改用事件委托的写法，确保新生成的输入框也能触发这个逻辑：

// 事件委托写法，覆盖动态生成的输入框
$(document).on('keydown', 'input[type="number"]', function(e) {
    if (e.key === 'Enter' || e.keyCode === 13) {
        e.preventDefault();
        $(this).blur();
    }
});

原理说明 #

因为页面没有<form>标签，浏览器无法识别Go按钮的默认动作，所以我们手动监听回车键（Go按钮本质就是触发回车键），当用户点击Go时，强制让输入框失去焦点——移动端浏览器在输入框失焦时，会自动收起软键盘，完美解决问题。

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