如何在JavaScript输入元素change回调触发的长时间计算中显示等待光标

这个问题的核心原因是：当你通过回车或Tab键触发输入框的change事件时，输入框仍然持有焦点——浏览器会优先显示输入框的文本光标，哪怕你给body加了waiting类，这种焦点状态下的光标样式优先级更高，导致等待光标无法正常显示。而点击输入框外部触发change时，输入框已经失去焦点，所以等待光标能正常生效。

下面是几个针对性的解决方案，按优先级推荐：

方案一：主动让输入框失去焦点 #

在设置waiting类之前，先让触发事件的输入框失去焦点，这样就能立刻移除文本光标，让等待样式生效：

function updateLimits(event) {
    event.preventDefault();
    event.stopPropagation();
    
    // 让触发事件的输入框失去焦点
    if (event.target.tagName === 'INPUT') {
        event.target.blur();
    }
    
    body.className = 'waiting';
    // 用requestAnimationFrame确保浏览器完成重绘后再执行计算
    requestAnimationFrame(() => {
        setTimeout(plot, 0);
    });
}

这里用requestAnimationFrame配合setTimeout，比单纯用setTimeout更可靠，能确保浏览器完成样式更新和重绘后再启动耗时计算。

方案二：强化CSS样式的优先级 #

如果不想让输入框失去焦点（比如保留用户输入的上下文），可以进一步强化等待光标的CSS优先级，覆盖输入框焦点状态的默认光标：

body.waiting * { 
    cursor: wait !important; 
}
/* 额外覆盖输入框焦点状态的光标 */
body.waiting input:focus {
    cursor: wait !important;
}

不过这种方式可能在部分浏览器里仍然有优先级问题，因为浏览器的默认用户代理样式可能有更高的优先级，所以方案一通常更稳妥。

方案三：移除无用的body.focus() #

你原来的代码里用了body.focus()，但body默认是不可聚焦的（除非给它设置tabindex="-1"），这步操作其实没什么作用，反而可能干扰浏览器的焦点状态，建议直接移除这行代码。

修改后的完整核心代码示例 #

function updateLimits(event) {
    event.preventDefault();
    event.stopPropagation();
    
    // 处理输入框焦点
    if (event.target.tagName === 'INPUT') {
        event.target.blur();
    }
    
    body.className = 'waiting';
    // 确保重绘后执行计算
    requestAnimationFrame(() => {
        setTimeout(plot, 0);
    });
}

function plot() { // 耗时计算任务
    var n;
    for (n = 1; n < 999999; n++) {
        factor(n, Math.sqrt(n) + 1);
    }
    body.className = '';
    // 计算完成后可以恢复输入框焦点（可选）
    // 注意：需要在updateLimits中先把event.target存为变量，避免异步失效
    // savedInput.focus();
}

这样修改后，无论是通过回车、Tab还是点击外部触发输入框的change事件，等待光标都能正常显示了。如果需要在计算完成后恢复输入框的焦点，可以在updateLimits里先把event.target存为变量，再在plot末尾调用focus()方法。

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