Fill and submit textarea programmatically in javascript

我们两清 提交于 2019-12-19 04:25:24

问题


I'm trying to automate the submission of replies to my Steemit posts using plain JS or Jquery.

I used the javascript code below but the button remains disabled and therefore does not allow to post the reply/comment.

How can I correctly trigger keydown / keypress / keyup events on the textarea in order to simulate the user "classic" interaction to send a reply?

Thanks


Target example: https://steemit.com/usa/@gaottantacinque/happy-4th-of-july

In the Dev Tools console:

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

Notes: This code fills the textarea but the button is still disabled. Simply manually clicking on the textarea and typing anything the button gets enabled instead.

Also, the textarea value inserted programmatically disappears after clicking for instance on the background but it does not when entered normally.


回答1:


After trying everything, I found out that the problem seems to be a bug in React on triggering onchange for textareas.

More info on the bug

There is a workaround..

Solution:

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


来源:https://stackoverflow.com/questions/51216332/fill-and-submit-textarea-programmatically-in-javascript

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!