使用javascript以编程方式填充和提交textarea

Question

我正在尝试使用普通的JS或Jquery自动提交对Steemit帖子的回复。

我使用了以下JavaScript代码，但该按钮保持禁用状态，因此不允许发布回复/评论。

如何模拟文本区域上的keydown / keypress / keyup事件，以模拟用户“经典”交互以发送回复？

谢谢

目标示例：https：//steemit.com/usa/@gaottantacinque/happy-4th-of-
july

在开发工具控制台中：

function nap (durationMs) {
  new Promise(resolve => setTimeout(() => resolve(), durationMs))
}

async function replyToPost() {
  var replyBtn = document.getElementsByClassName("PostFull__reply")[0]
    .getElementsByTagName('a')[0];
  replyBtn.click();
  await nap(1000);
  var textarea = document.getElementsByTagName('textarea')[0];
  const msg = 'My programmatically generated comment goes here';
  textarea.focus();
  textarea.click();
  textarea.value = msg; // textarea.innerHTML = msg; textarea.innerText = msg;
  await nap(100);
  var postReplyBtn = document.querySelectorAll('[type=submit]')[1];
  // postReplyBtn.disabled = false;
  postReplyBtn.click();
}

replyToPost();

注意：此代码将填充文本区域，但该按钮仍处于禁用状态。只需手动单击文本区域，然后键入任何内容即可启用按钮。

此外，例如，在背景上单击后，以编程方式插入的textarea值会消失，但在正常输入时不会消失。

Answer 1

经过一切尝试后，我发现问题似乎是React触发textareas的onchange时的一个错误。

有关该错误的更多信息

有一种解决方法。

function setNativeValue(element, value) {
  const valueSetter = Object.getOwnPropertyDescriptor(element, 'value').set;
  const prototype = Object.getPrototypeOf(element);
  const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set;

  if (valueSetter && valueSetter !== prototypeValueSetter) {
    prototypeValueSetter.call(element, value);
  } else {
    valueSetter.call(element, value);
  }
}

var textarea = document.getElementsByTagName('textarea')[0];
setNativeValue(textarea, 'My automated comment here');
textarea.dispatchEvent(new Event('input', { bubbles: true }));