jQuery：Android移动端输入框切换时如何触发自定义函数

这个场景我之前踩过坑，Android Chrome的键盘「下一个」按钮和桌面端的回车逻辑不一样——它只会直接把焦点切到下一个输入框，不会触发keydown的回车键（13）事件，所以你原来只监听keydown的逻辑自然覆盖不到这个移动端场景。

下面给你几个实用的解决方案，按推荐程度排序：

方案1：监听输入框的focusout事件（最直接） #

当用户点击键盘「下一个」时，当前输入框会失去焦点，我们可以监听这个事件来触发myFunction，同时保留原来的回车监听兼顾桌面端：

// 把过时的bind换成on，jQuery官方更推荐用on绑定事件
$("#login").on("keydown", function(event) {
    if (event.which === 13) {
        event.preventDefault(); // 阻止默认回车行为，避免页面意外刷新
        myFunction();
    }
});

// 监听当前输入框失去焦点的事件
$("#login").on("focusout", function() {
    // 可选判断：只在存在下一个输入框时触发，避免用户点击空白区域误触发
    const nextInput = $(this).next("input");
    if (nextInput.length > 0) {
        myFunction();
    }
});

方案2：监听目标输入框的focusin事件（更精准） #

如果myFunction的作用是显示下一个输入框，那可以直接监听下一个输入框的获取焦点事件，确保只有当焦点切换过来时才触发：

// 保留桌面端回车逻辑
$("#login").on("keydown", function(event) {
    if (event.which === 13) {
        event.preventDefault();
        myFunction();
    }
});

// 假设下一个输入框的id是next_input
$("#next_input").on("focusin", function() {
    // 可选判断：确认焦点来自上一个输入框，进一步避免误触发
    const prevInput = $(this).prev("input");
    if (prevInput.attr("id") === "login") {
        myFunction();
    }
});

方案3：批量绑定事件（适配多输入框场景） #

如果你的表单有多个输入框需要依次切换，可以给所有输入框统一绑定事件，一次性覆盖所有场景：

// 给表单内所有输入框绑定keydown和focusout事件
$("form input").on("keydown focusout", function(event) {
    const currentInput = $(this);
    // 处理桌面端回车事件
    if (event.type === "keydown" && event.which === 13) {
        event.preventDefault();
        myFunction(currentInput); // 传入当前输入框，方便函数定位下一个目标
    }
    // 处理移动端键盘「下一个」的失焦事件
    else if (event.type === "focusout") {
        const nextInput = currentInput.next("input");
        // 只有当焦点确实切换到下一个输入框时才触发
        if (nextInput.length > 0 && nextInput.is(":focus")) {
            myFunction(currentInput);
        }
    }
});

测试的时候记得用真实的Android设备上的Chrome浏览器，模拟器的键盘事件可能和真机有差异哦~

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