WebView2浏览器中

反卷练习生创建于 6天22小时前

WebView2浏览器中使用浏览器子程序更新文本框内容，显示是更新进去了，但是鼠标一点击就不见了，下面的发送按钮也不能激活。这是什么原因？

同样的网页，在谷歌浏览器中使用浏览器控制更新这个内部文本，是正常的可以发送

反卷练习生最后更新于 2025/6/9

添加评论

请绑定手机号后发表评论

回复内容

CL 6天22小时前

浏览器控制会自动触发一些事件， changed之类的，可能有影响吧。

反卷练习生回复 CL 6天22小时前 :

那该如何解决这个问题呀

请绑定手机号后发表评论

CL 6天22小时前

在 JavaScript 中，如果你希望给 <input> 框设置一个新值，并且触发它原本绑定的事件（如 input, change 或者框架自定义的监听器），需要手动分两步：

✅ 1. 设置值

document.querySelector('#myInput').value = '新的值';

✅ 2. 触发事件（比如 `input` 或 `change`）

// 触发 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 或内部优化）。
bubbles: true 让事件可以冒泡，方便框架或父元素监听。

如你在用某个框架（如 Vue、React、jQuery），我可以补充对应的最佳做法。需要的话请告诉我框架或具体场景。

反卷练习生回复 CL 6天18小时前 :

怎么弄都弄不好，能不能麻烦做一个通用的WebView2浏览器控制子程序，现有的公共子程序用不了，只能点击触发，不能更新元素信息

CL 回复反卷练习生 6天18小时前 :

上面例子是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 }));

CL 最后更新于 6天17小时前

反卷练习生回复 CL 6天2小时前 :

测试还是不行，鼠标一点击内容就消失了，即使不点击鼠标发送按钮也无法激活

CL 回复反卷练习生 5天23小时前 :

经过仔细研究，这个网页是Ract编写的，这种情况通常需要操作react状态才行。
下面是一个变通的方法来触发变更。

var input = document.querySelector('#chat-input');

input.value = '今天是几号？';

// 触发 input 和 change 事件

input.dispatchEvent(new Event('input', { bubbles: true }));

input.dispatchEvent(new Event('change', { bubbles: true }));

var event = new Event('input', { bubbles: true });

var tracker = input._valueTracker;

if (tracker) {

// @ts-ignore

tracker.setValue(undefined);

}

input.dispatchEvent(event);

请绑定手机号后发表评论

WebView2浏览器中

回复内容

✅ 1. 设置值

✅ 2. 触发事件（比如 input 或 change）

🧩 示例（完整）

⚠️ 注意事项

回复主贴

✅ 2. 触发事件（比如 `input` 或 `change`）