Заполните и отправьте textarea программно в JavaScript

Я пытаюсь автоматизировать отправку ответов на мои сообщения Steemit, используя обычный JS или Jquery.

Я использовал код JavaScript ниже, но кнопка остается отключенной и поэтому не позволяет публиковать ответ / комментарий.

Как я могу правильно вызвать события keydown / keypress / keyup на textarea, чтобы смоделировать "классическое" взаимодействие пользователя для отправки ответа?

Спасибо

Целевой пример: https://steemit.com/usa/@gaottantacinque/happy-4th-of-july

В консоли Dev Tools:

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

Примечания: этот код заполняет текстовое поле, но кнопка по-прежнему отключена. Просто вручную нажимая на текстовое поле и печатая все, что вместо этого активируется кнопка.

Кроме того, значение текстовой области, вставленное программным способом, исчезает после нажатия, например, на фоне, но не при обычном вводе.

Источник

2 ответа

Решение

Попробовав все, я обнаружил, что проблема заключается в ошибке в React при запуске обмена для textareas.

Больше информации об ошибке

Есть обходной путь..

Решение:

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 }));
Источник

в некоторых случаях это может не сработать, как и для меня, но вот общее решение:

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

я также хочу поблагодарить предыдущего человека, который писал об этом ... это действительно помогло ОЧЕНЬ

вот где я это нашел:

Источник
Другие вопросы по тегам