JavaScript 触发 InputEvent.isTrusted = true

Question

我正在尝试在 JavaScript 中自动执行某些任务，并且需要使用

InputEvent

，但是当我使用普通事件时，我得到

event.isTrusted = false

并且我的事件什么也没做。这是我的活动代码：

var event = new InputEvent('input', {
    bubbles: true,
    cancelable: false,
    data: "a"
}); 

document.getElementById('email').dispatchEvent(event);

此代码应将“a”放入 id 为“email”的文本字段中，但当

event.isTrusted = false

时，此代码什么也没做。我正在 Chrome 开发者工具的“源”选项卡中使用“事件侦听器断点”对其进行测试（我仅检查了键盘>输入断点，它显示了所用事件的所有属性）。我比较了真实键盘点击的所有属性，唯一不同的是

event.isTrusted

。

我可以改变什么或者我可以做什么来获得

event.isTrusted = true

？

Answer 1

Event 接口的 isTrusted 只读属性是一个布尔值，当事件由用户操作生成时，该属性为 true；当事件由脚本创建或修改或通过dispatchEvent 调度时，该属性为 false。 来源：MDN

您可能误解了输入事件的概念，该事件是在用户输入内容后

触发的。手动触发事件不会使输入改变它们的值，只是改变了输入的值才触发事件而不是相反。

如果您确实想使用自定义事件更改输入的值，您可以执行以下操作：

let TargetInput = document.getElementById('target')
let Button = document.getElementById('btnTrigger');

Button.addEventListener('click',function(e){
    Trigger();
}, false);

TargetInput.addEventListener('input',function(e){
    if(!e.isTrusted){
		//Mannually triggered
		this.value += e.data;
	}
}, false);

function Trigger(){
	var event = new InputEvent('input', {
		bubbles: true,
		cancelable: false,
		data: "a"
	}); 

	TargetInput.dispatchEvent(event);
}

Target: <input type="text" id="target">

<hr>

<button id="btnTrigger">Trigger Event</button>

执行以下代码后的任何 addEventListener 调用都会将 isTrusted 设置为 true。

Element.prototype._addEventListener = Element.prototype.addEventListener;
Element.prototype.addEventListener = function () {
    let args = [...arguments]
    let temp = args[1];
    args[1] = function () {
        let args2 = [...arguments];
        args2[0] = Object.assign({}, args2[0])
        args2[0].isTrusted = true;
        return temp(...args2);
    }
    return this._addEventListener(...args);
}

Answer 2

注意：

这是一种非常“hacky”的方法。

不幸的是，您无法在 Google Chrome 和其他现代浏览器中使用 isTrusted=true

以编程方式生成事件。 请参阅

Answer 3

Pupeeteer

可能会有所帮助。它生成可信事件。

Answer 4

在浏览器中，输入事件可以分为两大组： 可信与不可信。 可信事件：用户与页面交互生成的事件， 例如使用鼠标或键盘。不受信任的事件：由以下人员生成的事件 Web API，例如document.createEvent 或 element.click() 方法。 网站可以区分这两组：

使用 Event.isTrusted 事件标志

嗅探伴随事件。 例如，每个受信任的“点击”事件前面都有“mousedown” 和“mouseup”事件。

• 出于自动化目的，重要的是 生成可信事件。
使用 Puppeteer 生成的所有输入事件都是 值得信赖并触发适当的伴随事件。

我发现不可能将

isTrusted

设置为 true，但是根据您的需要，潜在的解决方案是在 DevTools 中创建本地覆盖并删除脚本代码中的条件。这将告诉 Chrome 使用您的版本（删除了

Answer 5

检查）而不是网站的 JS 文件。