WebView2浏览器中使用浏览器子程序更新文本框内容,显示是更新进去了,但是鼠标一点击就不见了,下面的发送按钮也不能激活。这是什么原因?
同样的网页,在谷歌浏览器中使用浏览器控制更新这个内部文本,是正常的可以发送
浏览器控制会自动触发一些事件, changed之类的,可能有影响吧。
那该如何解决这个问题呀
在 JavaScript 中,如果你希望给 <input> 框设置一个新值,并且触发它原本绑定的事件(如 input, change 或者框架自定义的监听器),需要手动分两步:
<input>
input
change
document.querySelector('#myInput').value = '新的值';
// 触发 input 事件 document.querySelector('#myInput').dispatchEvent(new Event('input', { bubbles: true })); // 如果还需要触发 change 事件 document.querySelector('#myInput').dispatchEvent(new Event('change', { bubbles: true }));
<input id="myInput" oninput="console.log('input事件触发:', this.value)" onchange="console.log('change事件触发:', this.value)"> <script> const input = document.querySelector('#myInput'); input.value = '自动设置的值'; // 触发 input 和 change 事件 input.dispatchEvent(new Event('input', { bubbles: true })); input.dispatchEvent(new Event('change', { bubbles: true })); </script>
有些框架(如 React)内部使用了特殊的事件系统,这种方式可能不完全触发其内部处理器。React 需要手动设置 value 属性并使用 input 事件派发(但需谨慎,因为 React 可能有 Shadow DOM 或内部优化)。
value
bubbles: true 让事件可以冒泡,方便框架或父元素监听。
bubbles: true
如你在用某个框架(如 Vue、React、jQuery),我可以补充对应的最佳做法。需要的话请告诉我框架或具体场景。
怎么弄都弄不好,能不能麻烦做一个通用的WebView2浏览器控制子程序,现有的公共子程序用不了,只能点击触发,不能更新元素信息
上面例子是AI生成的,确保能看懂这个代码。 里面的选择器要改成实际网页里的选择器。
var input = document.querySelector('#chat-input'); input.value = '自动设置的值'; // 触发 input 和 change 事件 input.dispatchEvent(new Event('input', { bubbles: true })); input.dispatchEvent(new Event('change', { bubbles: true }));