How to simulate real keyboard keypress in Javascript

Question

function eng (zEvent) {
var message = document.getElementById('message-textarea').value;

function strip_tags(str) {
    str = str.toString();
    return str.replace(/<\/?[^>]+>/gi, '');
}
GM.xmlHttpRequest({
  method: "POST",
  url: "https://example.com/ajax/translator.php",
  data: "message="+message,
  onload: function(response) {
  document.getElementById("message-textarea").value = strip_tags(response.responseText);
  },
  headers: {
    "Content-Type": "application/x-www-form-urlencoded"
  }
});

The code I've created now posts the text entered in the #message-textarea object, changes its language with translate, and reflects it back to the #message-textarea object, and this code works very well.

My problem is: There is a controller on the #message-textarea and it understands that it is not written with the keyboard in a certain way and does not activate the submit button in any way. What I want to do is to print the incoming response to the #message-textarea object as if it were typed with a keyboard.

Answer 1

function simulateInput(str) {
  var textarea = document.getElementById('message-textarea');
  var value = textarea.value;
  var event = new Event('input', { bubbles: true });

  for (var i = 0; i < str.length; i++) {
    value += str.charAt(i);
    textarea.value = value;
    textarea.dispatchEvent(event);
  }
}

Usage ;

var translatedText = strip_tags(response.responseText);
  simulateInput(translatedText);