0

Preciso simular um input como se alguem estivese digitando isto inclui a chamada dos eventos Keyup, KeyDown, Keypress, Change etc... Apenas javascript mesmo sem JQuery.

2 Respostas 2

3

Não sei se entendi corretamente, fiz um exemplo bem simples que simula a digitação de uma palavra em um input.

Caso seja uma frase ou algo mais complexo, peço que deixe mais claro por gentileza em sua pergunta ou me informe nos comentários se não é bem isso que você quer.

Se não entendi corretamente me informe que deleto a resposta.

EDIT: Adicionado eventos de keyup, keypress e keydown na digitação desta simulação. Para melhor visualização dos eventos, dexei comentado o keypress e o keydown.

Segue abaixo:

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" />

3
  • Na verdade isso funciona mas não ativa os eventos, de keyboard exmplo keydown, keyup e key press. Commented 20/05/2018 às 0:17
  • 1
    Editei a pergunta, veja se ajuda. Commented 20/05/2018 às 0:45
  • 1
    Excelente era exatamente isto ;D Obrigado mesmo... Commented 20/05/2018 às 0:51
2

Pode fazer desta forma:

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">

3
  • Isso tembem funciona mas tambem não ativa os eventos, de keyboard exmplo keydown, keyup e key press. Commented 20/05/2018 às 0:22
  • 1
    É eu vi a sua edição da pergunta. Vou verificar...
    – Sam
    Commented 20/05/2018 às 0:22
  • 1
    Veja se era isso agora.
    – Sam
    Commented 20/05/2018 às 0:34

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .