遇到的问题:
使用js代码模拟input框中输入指定的字符串,在浏览器调试页面能看到输入框的文字已经变成我需要的文字,但是只要我点击输入框,或者页面上的其他输入框,输入框的文字就清空了。
解决过程和方法:
-
最开始以为是什么代码清空了我的输入,没有找到相关代码。
-
然后发现,如果我手动输入一行文字,然后再用代码输入一段文字,当点击输入框的时候,文字会变成我手动输入的文字。
-
使用chrome浏览器开发工具(其他浏览器也可能有这个功能),监控相应的input的值,当value值变化的时候中断。在开发者模式下,选择需要设置断点的元素,右键菜单:Break on-> attribute modifications
-
发现中断的地方和Ract框架的代码相关,google一下,找到了相关的问题和解决方法。
-
最后我的代码如下:
//inputid是需要赋值的input的id
let event = new Event('input', { bubbles: true });
let input = document.querySelector('#inputid');
let lastValue = input.value;
input.value = '输入指定值';
let tracker = input._valueTracker;
if (tracker) {
tracker.setValue(lastValue);
}
input.dispatchEvent(event);
具体原因大家可以google查找下,我的问题解决了,就没继续深究了。
参考链接:https://juejin.cn/post/6844904128305430541