iOS端HTML表单：提交时关闭键盘

嘿，我懂你遇到的这个小麻烦——用AJAX异步提交表单后，iPhone上的键盘总赖着不消失，对吧？这是因为默认表单提交会触发页面刷新，系统会自动收起键盘，但AJAX是无刷新提交，页面状态没变化，键盘就停在那儿了。别担心，加几行代码就能轻松搞定！

核心思路 #

在AJAX请求完成后（不管成功还是失败），让当前聚焦的输入框失去焦点，iOS系统就会自动收起键盘啦。

结合你的表单的具体实现 #

直接用你现有的表单结构，我们可以这么写：

// 绑定表单的提交事件
$('#login').on('submit', function(e) {
    // 先阻止表单的默认提交行为，避免页面刷新
    e.preventDefault();

    // 序列化表单数据，方便AJAX传递
    const formData = $(this).serialize();

    // 发起AJAX请求
    $.ajax({
        url: '你的登录接口地址', // 替换成你实际的后端接口URL
        type: 'POST',
        data: formData,
        success: function(res) {
            // 这里写登录成功后的逻辑，比如跳转到首页、提示用户等
            alert('登录成功！');
            // 收起键盘：让所有输入框失去焦点
            $('#username, #password').blur();
        },
        error: function(xhr, err) {
            // 处理登录失败的情况，比如提示错误信息
            alert('登录失败，请检查账号密码！');
            // 即使失败也要收起键盘，别让用户一直对着键盘发呆
            $('#username, #password').blur();
        },
        // 可选：不管请求成功还是失败，都会执行这个回调
        complete: function() {
            // 如果你想确保键盘100%收起，也可以把blur放在这里
            // document.activeElement.blur(); // 更通用的写法，不用指定具体输入框
        }
    });
});

更通用的收起小技巧 #

如果你不想挨个指定输入框，可以用document.activeElement获取当前正在聚焦的元素，直接让它失去焦点：

document.activeElement.blur();

这个方法不管当前是用户名框还是密码框聚焦，都能生效，代码更简洁灵活。

注意点 #

• 确保你的jQuery已经正确引入，版本别太老；
• 在iOS Safari里，blur()方法是完全可靠的，能触发键盘收起；
• 如果你的表单后续加了其他输入类型（比如textarea），这个方法同样适用。

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