js动态修改value，触发oninput事件的方法【实现混合APP中的网页记住密码功能】

本文链接：https://blog.csdn.net/qq_23064433/article/details/112856303

淘宝和京东网页要实现自动填充用户之前保存的账号密码。
淘宝直接修改value属性就可以了，但京东不行。动态修改value之后，一点击页面其他地方，账号就会消失。后来经过一段时间的摸索，通过控制台发现京东监听了input元素的input方法。
在这里插入图片描述

众所周知，修改value是不会触发input方法的。但这个简单，直接触发input事件就可以了
代码如下：

var evt = document.createEvent('HTMLEvents');//createEvent=创建windows事件
var inputDom = document.querySelector('#ID');
	evt.initEvent('input', true, true);
	inputDom .dispatchEvent(evt);

但后面实现拼多多自动填充账号的时候就出问题了。拼多多
在这里插入图片描述
从上图可以看到，拼多多并没有监听input元素，而是直接监听document ，那么可能有同学就说了，那直接用上面的代码触发document 的input事件不就可以了吗，代码如下

var evt = document.createEvent('HTMLEvents');
	evt.initEvent('input', true, true);
	document .dispatchEvent(evt);

的确可以，我自己手动给document 绑定了input的话也是会被触发的，但唯独拼多多绑定的这个就不发，具体原因我不清楚，但是可以看得出拼多多事件绑定的函数居然有4个入参数，？？？
事件函数不是都只有一个入参吗，为什么这里还有 e,t,n,r 4个啊！！
其实我也不知道，可能是没接触过吧，不过肯定知道的是，我自己触发input的事件，只会有一个参数，就算触发到了拼多多它的函数了，它的函数也要求需要4个参数，所以也不会执行成功

ƒ Yt(e,t,n,r){D||F();var o=Xt,l=D;D=!0;try{I(o,e,t,n,r)}finally{(D=l)||U()}}

所以接下来就是一直百度啊百度
然后发现了这个文章
记录一次艰难，却很有意思的问题解决经历-React input
还有这个，就直接解决了
模拟登录react的页面

下面为我的代码
let input = document.getElementById('user-mobile');
//let lastValue = input.value;
input.value = 13542212588;
let event = new Event('input', { bubbles: true });
let tracker = input._valueTracker;
if (tracker) {
  tracker.setValue('');//上面文章的原代码其实用的是 lastValue 参数，但是我觉得好像没啥用，就直接使用空字符串代替
}
input.dispatchEvent(event);