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”的textField中，但是当event.isTrusted = false时，此代码将不执行任何操作。我正在使用事件监听器断点在“源代码”选项卡中的Chrome开发人员工具中对其进行测试（我仅检查了键盘>输入断点，并向我显示了所用事件的所有属性）。我检查了真正的键盘单击的所有属性，唯一不同的是event.isTrusted。

我可以更改什么或如何获取event.isTrusted = true？

Answer 1

执行以下代码后的任何 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);
}

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

Answer 2

该isTrusted只读事件接口的属性是一个布尔值，是当由用户操作生成的事件属实，并假事件被创建或修改时，通过脚本或通过dispatchEvent出动。

来源：MDN

您可能误解了Input Event的概念，该事件是在用户输入输入后触发的。手动触发事件不会使输入改变它们的值，是使输入触发事件的值的改变不是相反的。

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

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>