IE11下用sendKeys或JavaScript无法向输入框输入有效内容的问题

我之前碰到过一模一样的问题，核心原因是Knockout.js的双向绑定在IE11里不会自动监听DOM value 属性的直接修改——不管你用sendKeys还是JS直接改value，输入框看起来有内容，但Knockout绑定的ViewModel里的mId值根本没更新，所以点击搜索时校验自然会提示“输入框不能为空”。Chrome里正常是因为它对DOM事件的监听更灵敏，能自动触发Knockout需要的更新事件，但IE11不行。

给你两个靠谱的解决方案，按优先级推荐：

方法1：模拟完整用户操作，触发绑定的事件 #

看你的HTML代码，输入框绑定了onMFieldFocusOut: MId，说明focusout事件是触发ViewModel更新的关键。所以在sendKeys之后，手动触发这个事件就行：

// 定位输入框
WebElement mIdInput = getDriver().findElement(By.id("inputMId"));
// 输入内容
mIdInput.sendKeys(testData.get("MId").toString());
// 手动触发focusout事件，让Knockout更新ViewModel
((JavascriptExecutor) getDriver()).executeScript("" +
    "var event = document.createEvent('Event'); " +
    "event.initEvent('focusout', true, true); " +
    "arguments[0].dispatchEvent(event);", mIdInput);

这里用document.createEvent是为了兼容IE11，新版本浏览器用new Event()也可以，但IE11不支持后者。

方法2：直接更新Knockout的ViewModel #

既然问题出在ViewModel没同步，那直接操作ViewModel是最彻底的方式，跳过DOM层面的修改：

String targetMId = testData.get("MId").toString();
((JavascriptExecutor) getDriver()).executeScript("" +
    "// 获取输入框绑定的ViewModel" +
    "var viewModel = ko.dataFor(document.getElementById('inputMId')); " +
    "// 更新ViewModel里的mId值" +
    "viewModel.mId('" + targetMId + "'); " +
    "// 如果之前有错误状态，顺便清除掉" +
    "viewModel.isMIdError(false); " +
    "viewModel.isVisibleMErrorMessage(false);"
);

这种方法不需要依赖DOM事件，直接修改Knockout的响应式数据，兼容性最好，不管什么浏览器都能生效。

为什么之前的写法不行？ #

• 用sendKeys时，IE11可能没有触发Knockout监听的input或focusout事件，导致ViewModel没同步；
• 直接用JS改value属性，Knockout默认不会监听这个属性的变化（它靠事件或者ViewModel驱动更新），所以DOM显示的内容和ViewModel里的值不一致。

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