使用jQuery val()赋值为何仅IE中焦点转移？附输入框加法场景问题

问题场景 #

你有三个输入框：id="value1"、id="value2"、id="result"，需求是用户输入前两个值后，将二者相加的结果填入第三个输入框。使用jQuery编写的代码如下：

var value1 = $("#value1").val(); 
var value2 = $("#value2").val(); 
$("#result").val(value1 + value2);

实际测试发现：只有在IE浏览器中，当结果填入result输入框后，焦点会从value2自动转移到result；而Chrome等浏览器无此现象。改用纯JavaScript实现后，IE和Chrome中焦点都不会发生转移。

原因解析 #

这个问题其实和jQuery早期版本针对老IE的兼容性处理逻辑有关，我给你拆解下核心点：

• 原生JS的行为更纯粹：原生JS直接给输入框赋值document.getElementById('result').value = xxx，只是单纯修改DOM元素的value属性，不会触发任何额外的焦点相关操作，所以无论哪个浏览器都不会移动焦点。
• jQuery val()的兼容性补丁：早期jQuery的val()方法为了兼容老IE的表单元素bug（比如输入框值修改后无法正确触发change事件、部分表单控件值同步异常等），内部做了额外的处理。在IE环境下，这些处理逻辑可能会触发一些隐含的DOM操作——比如为了确保值能被正确渲染，jQuery可能短暂地将焦点定位到目标输入框上，或者调用了某些会导致焦点转移的IE专属API，最终导致焦点留在了result输入框中。
• 版本差异影响：如果你使用的是较老的jQuery版本（比如1.x系列），这个问题会更明显。新版本的jQuery已经修复了这类IE特有的兼容性问题，统一了val()方法在各浏览器中的行为，不会再出现这种意外的焦点转移。

总结 #

本质上是jQuery为了兼容老IE的表单处理逻辑，在val()方法中加入的额外操作，在IE环境下意外引发了焦点转移；而原生JS没有这些兼容性补丁，所以行为更一致。

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