当 .value 和事件似乎不起作用时，使用 JavaScript 设置文本框的值

Question

我正在尝试为 PayPal 捐赠基金捐赠页面上的文本框设置一个值，但我完全被难住了。

这是我尝试过的：

环境input.value

在 Chrome 开发工具中，如果我运行以下 JavaScript：

document.getElementById('nemo_inputAmount').value = '1'

值“1”出现在文本框中，但是当我单击“立即捐赠”按钮时，该值被清除并且表单不提交。

发送事件

当我按 Tab 键进入文本框、输入值“1”并按 Tab 键退出时，我使用 Chrome 开发工具来监视所有事件。

然后我使用下面的代码重新创建了每个事件。使用此方法，值“1”甚至不会出现在文本框中。我尝试了我能想到的每一种调度事件的组合和风格。

function textEvent(text) {
  let textEvent = document.createEvent('TextEvent');
  textEvent.initTextEvent('textInput', true, true, null, text);
  return textEvent;
}

function setDonationAmount(amount) {
  let amountInput = document.querySelector('input#nemo_inputAmount');

  if (amountInput) {
    console.log('Setting amount to', amount)

    const events = [
      new FocusEvent('focus', {
        composed: true
      }),
      new Event('select', {
        bubbles: true
      }),
      new KeyboardEvent('keydown', {
        bubbles: true,
        cancelable: true,
        composed: true,
        code: 'Digit1',
        key: '1',
        keyCode: 49,
        which: 49
      }),
      new KeyboardEvent('keypress', {
        bubbles: true,
        cancelable: true,
        composed: true,
        code: 'Digit1',
        key: '1',
        keyCode: 49,
        which: 49
      }),
      textEvent('1'),
      new Event('input', {
        bubbles: true
      }),
      new KeyboardEvent('keyup', {
        bubbles: true,
        cancelable: true,
        composed: true,
        code: 'Digit1',
        key: '1',
        keyCode: 49,
        which: 49
      }),
      new Event('change', {
        bubbles: true
      }),
      new FocusEvent('blur', {
        composed: true
      })
    ]

    events.forEach(function(event) {
      amountInput.dispatchEvent(event);
    })
  }
}

setDonationAmount('1');

正如您所看到的，我正在尝试用纯 JavaScript 来完成此操作。我完全困惑为什么上述解决方案都不起作用。

有没有人有什么建议？

Answer 1

输入是 React 组件的一部分。我通过在源中搜索输入的 ID 找到了这个 ( nemo_inputAmount)。这次搜索将我带到了组件的渲染函数。这是它的相关部分：

\n\n

_react2.default.createElement(\'input\', {\n  type: \'text\',\n  id: \'nemo_inputAmount\',\n  className: inputBoxStyling,\n  onChange: this.handleInputChange,\n  onFocus: this.handleInputFocus,\n  value: this.state.inputAmount,\n  autoComplete: \'off\',\n  placeholder: \'Other Amount\',\n  required: true\n}),\n

\n\n

您可以在其上看到事件处理程序：onChange和onFocus。处理程序是之前定义的。以下是片段：

\n\n

handleInputChange: function handleInputChange(event) {\n\n  var value = event.target.value;\n  var input = (0, _parseAmount2.default)(value);\n  if (input === undefined) {\n    return this.invalid();\n  }\n\n  this.setState({\n    inputAmount: input\n  });\n},\n\nhandleInputFocus: function handleInputFocus() {\n  this.setState({\n    selectedAmount: \'\',\n    radioBtnClicked: false,\n    clickedIndex: -1\n  });\n},\n

\n\n

您可以看到，当输入更改时，它会将inputAmount商店中的 更改为新金额。如果您回顾该createElement函数，您可以看到inputAmountstore 中的 绑定到value的属性input。

\n\n

  value: this.state.inputAmount,\n

\n\n

这意味着只有当相关事件被触发时事件处理程序才会运行，输入的值才会被设置。

\n\n

value以编程方式设置属性不会触发事件，这就是为什么您的输入不断清除的原因，因为商店未更新，因此它仍然是空的。

\n\n

为了使它工作，你将需要这个：

\n\n

const input = document.getElementById(\'nemo_inputAmount\');\nconst event = new Event(\'input\', { bubbles: true });\ninput.value = \'1\';\ninput.dispatchEvent(event);\n

\n\n

这部分创建了一个新input事件，它是实际对 \xe2\x80\x93 做出反应的事件 handleInputChange，我还没有查看 React 源来确认，这个声明是基于观察和这个Stack Overflow 答案。

\n\n

const event = new Event(\'input\', { bubbles: true });\n

\n\n

然后该部分分派该事件。

\n\n

input.dispatchEvent(event);\n

\n