第二次遇到这个问题了,第一次是在阿里云写了个随机选取域名的时候发现了这个问题,第二次是昨天有个项目又遇到了同样的问题。
诡异的是,如果用控制调试,会发现,明明通过js赋值了,也确实是赋值成功一瞬间,但是一瞬间之后就会被清空了。

原因分析
鉴于这种情况,我判断有两种可能。
第一种,某些网站特地监听了input的value更改的事件,在输入框没有焦点的情况,就判断为脚本输入清空,用来防脚本输入的。
第二种,网上看到的说法,我理解为是跟其他js或前端框架有冲突,例如vue的双向绑定。

解决过程
一般情况下,要改变input.value的值,首先反应是赋值。

let test=document.getElementsByID('xxxxx');
test.value='文字';

但是跑起来发现一闪而过,所以我想了想,设置属性再赋值。

test.setAttribute("value","888888");

然后发现依旧没有什么卵用。
那怎么办呢?找原因咯。
打开控制台调试,先用控制台赋值看能否成功,然而控制台赋值完美无错。
但是我的是脚本呀,我要让脚本跑起来,而不是要打开控制台自己手动赋值。
所以我开始调试,把断点下在赋值的地方(test.value或test.setAttribute),一调试发现,其实赋值是成功了的,只是被网站的一个js文件又清空了。
走到这里,终于知道是什么原因了。
于是代码来了。

var event = document.createEvent('HTMLEvents');
    event.initEvent("input", true, true);
    event.eventType = 'message';
    test.dispatchEvent(event);

代码注解
createEvent创建一个指定类型的事件。其返回的对象必须先初始化并可以被传递给 element.dispatchEvent。但是它的很多方法都被废弃了, 建议使用event constructors 来替代。

initEvent初始化新事件对象的属性。

event.initEvent(eventType,canBubble,cancelable)

eventType 字符串值。事件的类型。
canBubble 事件是否起泡。
cancelable 是否可以用 preventDefault() 方法取消事件。

Event.type 只读属性 会返回一个字符串, 表示该事件对象的事件类型。
dispatchEvent向一个指定的事件目标派发一个事件, 并以合适的顺序同步调用目标元素相关的事件处理函数。

补充说明
这个脚本后来又遇到了一个问题,多选框checkbox无法选中,确切来说,是使用常规方法选中之后,提交时却认为选中状态无效(也就是样子上看着是选中了的,但是不具备通过数据验证的功能)。
常规方法

let Oname = document.getElementsByName("checkboxinput")[1];
Oname.checked = true; //就是这种常规选中方式居然无效

因为这种常规选中方式无效,所以我心想,何不试试模拟人工选中呢,所以就先模拟聚焦然后再点击。

Oname.focus();
Oname.click();
Oname.dispatchEvent(event);  //可加可不加 接前面的代码 加上是为了保险

然后又完美搞定,美滋滋。


本文由 大古 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

还不快抢沙发

添加新评论