TAB键与change事件冲突：e.preventDefault()失效及重复触发问题

问题根源 #

你之前的做法存在两个核心问题：

1. 按TAB时，浏览器默认先将焦点移到下一个元素，再触发当前输入框的change事件，导致顶部的错误提示因焦点在下方无法被用户看到。
2. 你通过阻止TAB默认行为并手动触发change，使得输入框未真正失焦；后续点击页面其他位置时，输入框失焦会再次触发change，造成函数重复调用。

解决方案 #

方案1：保留change事件，主动控制滚动与焦点 #

无需修改TAB的默认行为，而是在change事件处理错误逻辑时，强制滚动到页面顶部，甚至将焦点拉回原输入框，确保用户能看到错误提示：

function myLogicFunction() {
    // 模拟AJAX请求及错误返回逻辑
    setTimeout(() => {
        // 移除已存在的错误提示，避免重复插入
        $('.top-error').remove();
        // 在页面顶部插入错误提示
        const errorTip = $('<div class="top-error" style="background: #fdd; padding: 8px; color: #c00;">输入内容不符合要求，请检查</div>');
        $('body').prepend(errorTip);
        // 强制滚动到页面顶部
        $('html, body').scrollTop(0);
        // 可选：将焦点放回原输入框，方便用户快速修改
        $('#name').focus();
    }, 400);
}

$('#name').change(function() {
    myLogicFunction();
});

方案2：监听TAB直接处理，从根源避免重复触发 #

如果需要在TAB按下时立即执行逻辑，可直接调用函数并手动转移焦点，跳过触发change事件，彻底避免重复调用：

// 给函数加执行锁，防止AJAX重复请求
let isProcessing = false;
function myLogicFunction() {
    if (isProcessing) return;
    isProcessing = true;

    // 模拟AJAX请求及后续逻辑
    setTimeout(() => {
        console.log('execute ajax call with some logic');
        // 插入错误提示、滚动到顶部等逻辑
        isProcessing = false;
    }, 500);
}

$('#name').keydown(function(e) {
    if (e.key === 'Tab') {
        // 直接执行逻辑
        myLogicFunction();
        // 手动将焦点移到下一个元素
        $('#bio').focus();
        // 阻止默认TAB行为，避免焦点自动跳转
        e.preventDefault();
    }
});

// 保留change事件处理其他失焦场景（比如点击页面空白处）
$('#name').change(function() {
    myLogicFunction();
});

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