通过js脚本修改input的value值无法触发change事件的解决方法

起因是用webview2在项目中做一个自动登录的功能。目标网站做了change事件的校验,直接登录即使input有赋值成功也会提示值为空。原因是通过js修改value值并没有触change事件。发查阅了很多资料都不能解决,最后看到这篇博文解决了。

解决思路

既然直接赋值无法触发,那么如果模拟用户操作输入信息的的过程能否触发呢?而在document下的execCommand方法,可以通过执行指令模拟复制粘贴等操作。

execCommand方法

其中insertText指令,可以在光标处插入选中的内容,因此先通过focus方法使input元素获取焦点,然后insertText通过指令插入对应信息,即可模拟点击粘贴的过程。

在这里插入图片描述

js代码如下

//获取目标input元素
let user = document.querySelector("input#userName");
//给目标input设置焦点
user.focus();
//模拟粘贴操作
document.execcommand('inserttext', false, 'username');
未经允许不得转载:桔子雨工作室 » 通过js脚本修改input的value值无法触发change事件的解决方法
分享到: 生成海报
一个数字化服务提供商

承接外贸建站,软件APP开发

部分产品联系我们
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

微信扫一扫关注
如已关注,请回复“登录”二字获取验证码