IT技术 - 为什么为输入设置值在 Whatsapp 上不起作用？ - 吾爱随笔录

我的 JS 技能有限，我正在开始研究 React。

我想做一个简单的任务：只需访问 Whatsapp 的网络版本（https://web.whatsapp.com），并填写输入以搜索联系人。我想通过 JS 做与我手动输入并键入联系人姓名时所做的相同的事情：Whatsapp 将搜索此联系人并显示结果。

因为页面只有一个输入，我的第一次尝试是简单地设置这个输入的值：

document.getElementsByTagName('input')[0].value = 'contact name';

这将填充输入，但不会触发使 Whatsapp 实际搜索联系人的事件；见下图：

所以我尝试了另一种方法，正如我上周对类似问题的回答所建议的那样：

var setValue = Object.getOwnPropertyDescriptor(
  window.HTMLInputElement.prototype,
  "value"
).set
var modifyInput = (value) => {
  const input = document.getElementsByTagName('input')[0]
  setValue.call(input, value)
  input.dispatchEvent(new Event('input', { bubbles: true}))
}

modifyInput('contact name')

在这种情况下，什么也没有发生，没有错误，但没有填写输入。

我应该采取什么方法来完成这项任务？

var setValue = Object.getOwnPropertyDescriptor( window.HTMLInputElement.prototype, "value" ).set var modifyInput = (value) => { const input = document.getElementsByTagName('input')[0] input.dispatchEvent(new Event('focus', { bubbles: true})) setValue.call(input, value) input.dispatchEvent(new Event('input', { bubbles: true})) } modifyInput('contact name')