为什么Xamarin.Forms WebView中调用blur()方法无法触发页面自动填充

核心问题原因 #

1. 多次调用Eval方法存在上下文隔离问题：WebView中每次执行Eval都是独立的全局作用域，你第一次声明的变量x在后续Eval调用中已经被释放，后续的操作实际都是对undefined执行，完全不生效
2. 拼写错误：代码中的x.sumbit()为拼写错误，正确写法为x.submit()
3. 仅修改value属性和调用blur不会触发网页事件监听：现在绝大多数网页的自动填充逻辑都会监听input、change原生事件，直接修改value属于静默修改，不会触发这些事件回调，自然不会触发后续自动填充逻辑

可行修复方案 #

将所有JS逻辑合并为单次调用，赋值后主动触发对应的原生事件，示例代码如下：

// 注意转义输入内容的单引号，避免JS语法报错
string escapedValue = something.Replace("'", "\\'");
string executeJs = $@"
(function() {{
    // 定位目标输入框
    const targetInput = document.getElementById('fieldID');
    if (!targetInput) return;

    // 给输入框赋值
    targetInput.value = '{escapedValue}';
    
    // 主动触发input事件，对应实时输入监听逻辑
    const inputEvt = new Event('input', {{ bubbles: true, cancelable: true }});
    targetInput.dispatchEvent(inputEvt);
    
    // 主动触发change事件，对应值修改完成后的监听逻辑
    const changeEvt = new Event('change', {{ bubbles: true, cancelable: true }});
    targetInput.dispatchEvent(changeEvt);

    // 模拟用户失焦操作
    targetInput.focus();
    targetInput.blur();

    // 如果需要提交表单再取消注释下面的代码，不需要可删除
    // if (targetInput.form) targetInput.form.submit();
}})();
";
// 单次执行所有JS逻辑
webview.Eval(executeJs);

额外排查点 #

• 确认执行JS的时机是在WebView页面完全加载完成后，避免DOM未渲染完成找不到目标元素
• 如果目标元素ID是动态生成的，可以更换选择器定位，比如通过name属性：document.querySelector('input[name="你的字段name属性值"]')
• 如果网页是React/Vue等框架开发的受控组件，上述方案不生效的话，可以替换赋值逻辑为下方代码，强制触发框架的响应式更新：

const nativeValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set;
nativeValueSetter.call(targetInput, '{escapedValue}');

• 如果输入框嵌套在iframe中，需要先获取iframe的contentWindow对象再操作内部DOM

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