12

Estou desenvolvendo um pequeno sistema em PHP onde o usuário apenas passa um crachá e pressiona enter. De alguma forma preciso fazer esse enter ser automático após alguns segundos (o botão já fica no focus após o preenchimento do campo) ou que ao passar o crachá novamente (somente números) o sistema entenda como um "enter". É possível?

Estou tentando adaptar essa função que bloqueou todas letras para esse caso:

function SomenteNumero(e){
   var tecla = (window.event) ? event.keyCode : e.which;

   if((tecla > 47 && tecla < 58))
       return true;
   else{
       if (tecla == 8 || tecla == 0)
           return true; 
       else 
           return false; 
   } 
}
4
  • Já tentou fazer algo com JavaScript? Pode postar o que tentou? Commented 24/08/2015 às 17:55
  • Minha empresa trabalha com cartões também. A sua máquina de leitura não simula um enter automaticamente? Commented 24/08/2015 às 17:56
  • Estou tentando adaptar essa função que bloqueou todas letras para esse caso: function SomenteNumero(e){ var tecla=(window.event)?event.keyCode:e.which; if((tecla>47 && tecla<58)) return true; else{ if (tecla==8 || tecla==0) return true; else return false; } }
    – Diego
    Commented 24/08/2015 às 17:57
  • Não Wallace, essa leitora é uma Nonus Homebank para boleto que adaptamos para leitura de cartão....
    – Diego
    Commented 24/08/2015 às 17:57

2 Respostas 2

7

Eu entendi a sua pergunta desta maneira:

Como automatizar a submissão de um formulário após preenchimento automático de um campo?

Monitore os eventos KeyDown e KeyUp, e após alguns segundos de inatividade valide o conteúdo digitado.

    var temporizador;                
    var intervalotemporizador = 2000;  //tempo em milissegundos. Neste caso, 2s.
    var $input = $('#campoCodigo');
    
    //Quando uma tecla for liberada no campoCodigo, iniciar temporizador:
    $input.on('keyup', function () {
      clearTimeout(temporizador);
      temporizador = setTimeout(avaliarConteudoDigitado, intervalotemporizador);
    });
    
    //Quando uma tecla for pressionada, limpar o temporizador:
    $input.on('keydown', function () {
      clearTimeout(temporizador);
    });
    
    //quando o usuário finalizar a 'digitação':
    function avaliarConteudoDigitado () {
      //Faça algo aqui - valide o código, mostre comentários, e ao final submeta o formulário:
      
      //document.getElementById("meuForm").submit();
      
      var valor = $input.val(); 
      
      if (isNaN(valor)) //isNaN: Is Not a Number (verifica se o valor não é numérico)
        $('#mensagem').val('ERRO: Não numérico.');
      else
      if (valor.length != 10)
        $('#mensagem').val('ERRO: Número de caracteres diferente de 10.');
      else
        $('#mensagem').val('OK.');
      
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='campoCodigo' />

<input type='text' id='mensagem' />

Adaptado de 'Run javascript function when user finishes typing instead of on key up?', SO Original.

2
  • A intenção seria essa mesmo, mas o usuário não terá acesso a teclado, é somente a leitura do cartão que gera uma sequencia de 10 números. Tentei alterar os eventos das teclas, para todos valerem como enter, mas até o momento não consegui.
    – Diego
    Commented 24/08/2015 às 18:26
  • @Diego Não é possível fazer essa diferenciação. O browser recebe os caracteres digitados como se fosse um usuário digitando o conteúdo. O que você pode fazer é incorporar a sua validação (apenas caracteres numéricos? comprimento total = 10?) na função avaliarConteudoDigitado().
    – OnoSendai
    Commented 24/08/2015 às 18:29
6

Você pode verificar o tamanho do valor do campo, se for o tamanho do número do crachá, envie o formulário, exemplo:

function SomenteNumero(e){
   var tecla = (window.event) ? event.keyCode : e.which;

   if((tecla > 47 && tecla < 58))
       return true;
   else{
       if (tecla == 8 || tecla == 0)
           return true; 
       else 
           return false; 
   } 
}

$(document).on('keyup change', '#numero', function(event){
  event.preventDefault();
  
  var res = SomenteNumero(event);
  
  
  var len = this.value.length;
  
  if (len < 10 && !res) return res;
  
  if (len == 10){
    $(this).prop('readonly', true);
    $('#teste').submit();
  }
  
});


$(document).on('submit', '#teste', function(event){
  event.preventDefault();
  alert('Form "enviado", SQN!');
  $('#numero').prop('readonly', false);
});
[readonly]{
background-color: #CCC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="teste">
  <input type="text" name="numero" id="numero">
 </form>

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 .