input动态赋值,无效的原因及解决方法
最近在开发中遇到的问题:
通过webview嵌入第三方网页,想实现免登录功能,即动态给账号跟密码的输入框赋值,触发提交按钮的点击事件,就可实现自动登录跳转进入主页内容。正常网站通过此方法都是可以实现的,但是遇到了一个网站,赋值成功,触发提交按钮时,就提示账号,密码没有值,输入框被清空了~~~
明明input上有值但是点击按钮就是说你没填内容,纳闷纳闷纳闷,各种找问题,甚至还观察了人家的input框,发现存在autocomplete=off,猜想可能是它引起 的,于是自己写了个简单的网页测试,然并不是它的原因~~~~
百度...百度....百度...
终于找到了一篇靠谱的文章,它里面是这样说的:
"可能人家的网站用了某些前端框架,此时我们用原生的JS企图去控制输入框的值就会出现无效的情况,因为此时只是修改了value属性,没有触发input或change事件,导致输入值没有最终确定。input和change事件默认情况下(作者设计的时候),只有当接收到键盘的按键(随便哪个键盘的按键消息),就会触发input和change事件,进而把输入框中的value赋值给预设的相关变量,到这一步才算走完整个设置value的过程。所以如果想给这类加料的输入框或者选择框用原生JS赋值,设置vlaue属性过后就必须手动触发一下input或change事件“
这要一说,原因明白了,解决方法当然就是事件触发器了~~
// 第一个输入框 inpt1.value = '11111' var event = document.createEvent('HTMLEvents'); event.initEvent("input", true, true); inpt1.dispatchEvent(event); 当有多个输入框的时候要异步执行,否则后面的输入框依然提示空值 new Promise(function(resolve, reject){ // 第一个输入框 inpt2.value = '2222' var evt = document.createEvent('HTMLEvents'); evt.initEvent("input", true, true); inpt2.dispatchEvent(evt); resolve() }).then(res => { // 点击按钮
btn.click();
})
参考文章:
本文来自博客园,作者:cmwang2017,转载请注明原文链接:https://www.cnblogs.com/bm20131123/p/17271960.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义