在 javascript 中以编程方式填写和提交文本区域

Question

我正在尝试使用纯 JS 或 Jquery.

自动提交对我的 Steemit posts 的回复

我使用了下面的 javascript 代码，但该按钮仍处于禁用状态，因此不允许 post reply/comment。

如何正确触发 textarea 上的 keydown / keypress / keyup 事件以模拟用户 "classic" 交互以发送回复？

谢谢

目标示例：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 中触发文本区域 onchange 的错误。

More info on the bug

有一个解决方法..

解决方案：

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 }));

Answer 2

这可能不适用于某些情况，因为它不适合我，但这是一个通用的解决方案：

 const textarea = document.getElementsByTagName('textarea')[0]
function setNativeValue(element, value) {
  const { set: valueSetter } = Object.getOwnPropertyDescriptor(element, 'value') || {}
  const prototype = Object.getPrototypeOf(element)
  const { set: prototypeValueSetter } = Object.getOwnPropertyDescriptor(prototype, 'value') || {}

  if (prototypeValueSetter && valueSetter !== prototypeValueSetter) {
    prototypeValueSetter.call(element, value)
  } else if (valueSetter) {
    valueSetter.call(element, value)
  } else {
    throw new Error('The given element does not have a value setter')
  }
}
setNativeValue(textarea, 'some text')
textarea.dispatchEvent(new Event('input', { bubbles: true }))

我还要感谢之前发帖的人……真的帮了大忙

here is where i found it:

在 javascript 中以编程方式填写和提交文本区域

Fill and submit textarea programmatically in javascript

javascript

html

reactjs

automation

steemit

解决方案：