All keys work as enter

Asked

Viewed 516 times

12

I’m developing a small PHP system where the user just passes a badge and presses enter. Somehow I need to make this enter be automatic after a few seconds (the button is already in Focus after filling the field) or when passing the badge again (only numbers) the system understands as a "enter". It is possible?

I’m trying to adapt this function that has blocked all letters for this case: 

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; 
   } 
}
javascript

  • Have you tried something with Javascript? You can post what you tried?

  • My company works with cards too. Your read machine does not simulate a enter automatically?

  • I’m trying to adapt this function that blocked all letters for this case: Function Somentenumero(e){ var key=(window.Event)? Event.keycode:e. which; if((key>47 && key<58)) Return true; Else{ if (key==8 || key==0) Return true; Else Return false; } }

  • No Wallace, this reader is a Nonus Homebank for billet that we adapted for card reading....

2 answers

7


I understood your question this way:

How to automate form submission after automatic completion of a field?

Monitor the events Keydown and Keyup, and after a few seconds of inactivity validate the typed content.

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

Adapted from 'Run javascript Function when user finishes Typing Instead of on key up? ', Original OS.

  • The intention would be this same, but the user will not have access to keyboard, it is only the reading of the card that generates a sequence of 10 numbers. I tried to change the events of the keys, for all to be valid as enter, but so far I could not.

  • @Diego It is not possible to make this differentiation. The browser receives the typed characters as if it were a user typing the content. What you can do is incorporate your validation (numeric characters only? total length = 10?) into the function avaliarConteudoDigitado().

6

You can check the size of the field value, if it is the size of the badge number, send the form, example:

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>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.