如何在WKWebView中通过代码触发HTML输入框的change事件？

在WKWebView中通过JavaScript代码填充HTML输入框后，输入框的值能正确设置，提交功能也正常，但像google.com这类网站的搜索结果联想弹窗不会出现。当前使用的代码如下：

let script = """
        var input = document.activeElement;
        input.value = '\(text)';
        var event = new Event('input');
        input.dispatchEvent(event);
        """
webView.evaluateJavaScript(script) { result, error in
    // 处理结果或错误
}

这属于系统限制吗？该如何解决？

这不是系统限制，问题出在你只触发了input事件。很多网站（包括Google）的搜索联想功能会监听更多原生输入相关的事件，仅触发input事件无法模拟真实用户输入的完整行为。你需要补充触发其他关键事件，并模拟输入时的光标状态，具体改进如下：

1. 同时触发keydown、keyup、compositionend事件，这些事件是很多网站用来检测真实输入的依据
2. 设置selectionStart和selectionEnd属性，模拟输入完成时光标在内容末尾的状态
3. 确保事件带有bubbles和cancelable属性，符合原生事件的特性

改进后的代码：

let script = """
var input = document.activeElement;
input.value = '\(text)';
// 模拟光标停在内容末尾
input.selectionStart = input.selectionEnd = input.value.length;

// 封装事件触发函数
function triggerEvent(el, type) {
    var event = new Event(type, { bubbles: true, cancelable: true });
    el.dispatchEvent(event);
}

// 按真实输入顺序触发事件
triggerEvent(input, 'keydown');
triggerEvent(input, 'keyup');
triggerEvent(input, 'input');
triggerEvent(input, 'compositionend');
"""
webView.evaluateJavaScript(script) { result, error in
    // 处理结果或错误
}

补充说明 #

• 不同网站监听的事件可能略有差异，如果上述代码仍不生效，可以尝试添加change事件
• 部分网站会通过isTrusted属性判断事件是否由用户真实操作触发，但在WKWebView中无法设置该属性（浏览器安全限制），不过通过组合触发多个事件，基本可以绕过这类检测

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