How to simulate input script by Javascript (without Jquery)

Question

I need to simulate an input as if someone was typing this includes the call of the events Keyup, Keydown, Keypress, Change etc... Javascript only even without Jquery.

Answer 1

I don’t know if I understand correctly, I made a very simple example that simulates typing a word into a input.

If it is a phrase or something more complex, I ask you to make it clearer please in your question or let me know in the comments if this is not what you want.

If I don’t understand correctly inform me that I delete the answer.

EDIT: Added keyup events, keypress and keydown in the typing of this simulation. For better viewing of events, I left commented the keypress and keydown.

Goes below:

function simulate() {
  var word = "Otorrinolaringologista";
  var wordsplit = word.split("");
  var i = 0;
  var time = setInterval(function() {    
    if (!wordsplit[i]) {
      clearInterval(time);
      return;
    }
    var el = document.querySelector('#teste');   
    el.value += wordsplit[i];    
    triggerEvent(el, 'keyup');
    // triggerEvent(el, 'keydown');
    // triggerEvent(el, 'keypress');
    i++;
  }, 100);
}

function triggerEvent(el, type) {
  if ('createEvent' in document) {        
    var e = document.createEvent('HTMLEvents');
    e.initEvent(type, false, true);
    el.dispatchEvent(e);        
  }
}

var inputlistener = document.querySelector('#teste');    
inputlistener.addEventListener('keypress', function (event) {
  console.log('Keypress acionado - Valor: ' + event.target.value);
});

inputlistener.addEventListener('keydown', function(event) {
  console.log('Keydown acionado - Valor: ' + event.target.value);
});

inputlistener.addEventListener('keyup', function(event) {
  console.log('Keyup acionado - Valor: ' + event.target.value);
});

simulate();

<input type="text" id="teste" name="teste" />

Answer 2

You can do it this way:

var campo = document.querySelector("#texto");
// flag para impedir que o setInterval seja acionado por mais de 1 evento
var flag = true;

campo.addEventListener("change", iniciar);
campo.addEventListener("keyup", iniciar);
campo.addEventListener("keydown", iniciar);
campo.addEventListener("keypress", iniciar);

function iniciar(){

   campo.value = '';
   
   var string = "Olá mundo!"; // texto a ser "digitado"

   if(flag){   
      flag = false;
      var tempo = setInterval(function(){
         var len = campo.value.length;
   
         if(len < string.length){
            campo.value += string.substring(len,len+1);
         }else{
            flag = true;
            clearInterval(tempo);
            console.log("fim!");
         }
      }, 200);
   }
}

Pressione alguma tecla do teclado:
<br>
<input autofocus type="text" id="texto">