Jquery monitoring key sequences

Question

I’m making a form, where data is entered by scanning barcodes (default code 128).

After scanning each value, the handheld scanner is already set to give a <TAB> and go to the next field, making it very practical in the repetitive use of this form.

But the ENTER has to be via keyboard. Losing that sequence of agile registrations. So I thought about creating a barcode, with a sequence of values in which through a javascript function I would understand that that is a sign of ENTER, ex: In the code it would be '+++++ Jquery would understand this sequence and would make the form Submit.

But unfortunately it didn’t work, because Jquery in my function can only understand the first key and not the sequence.

$(document).bind('keydown', '+++++', function (e) {
    alerte('teste');
    $('form#myForm').submit();
});

Or is there a way to make a special barcode for shipping?

Example in Fiddle https://fiddle.jshell.net/tvdpL6xe/

Answer 1

Another way to solve your problem without having to set up a special code would be to check that all inputs from form are filled and if yes, do the Submit.

$(document).bind('focusout', 'input', function (e) { // Podemos verificar no blur por que o leitor está configurado para dara um <TAB> ap
  var naoPreenchidos = $('form').find('input[type="text"]').filter(function() {
    return this.value === '';
  });
  if (naoPreenchidos.length === 0) {
    alert('teste vai postar');
    $('form#myForm').submit();
  }
});

Ma if you prefer to check the code you can check the sequence in the event of keyup instead of keydown, this way you can access the input value and compare with the code you configure.

$(document).bind('keyup', function (e) {
  var codigo = $(e.target).val();
  if (codigo === '+++++') {
    alert('teste vai postar');
    $('form#myForm').submit();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="teste" method="post">
  <input type="text" id="campo1" /><br>
  <input type="text" id="campo2" /><br>
  <input type="text" id="campo3" /><br>
  <input type="submit" value="enviar" />
</form>

Answer 2

You can create a global variable to go concatenating and comparing, when it is equal you run and clean, when there is a character other than + you also clean, follows below an example:

$(document).ready(function () {
  var codigo = "";
  $(document).bind('keypress', function (e) {
    if (e.charCode === 43) {
      for (var i = 0; i < codigo.length; i++) {
        if (codigo.substr(i, 1) != '+') {
          codigo = "";
          break;
        }
      }

      codigo = codigo + '+';

      if (codigo == '+++++') {
        alert("Vai enviar!");
        $('#teste').submit();
        codigo = "";
      }
    } else {
      codigo = "";
    }
  });
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<form id='teste' method='post'>
  <input type='text' id='campo1'><br>
  <input type='text' id='campo2'><br>
  <input type='text' id='campo3'><br>
  <input type='submit' value='enviar'>
</form>

For the event keydown was not giving to check which key was pressed, in the event keypress gave just right.

Answer 3

After scanning each value, the handheld scanner is already set to give a <TAB> and go to the next field, making it very practical in the repetitive use of this form.

Then I believe that the solution would be as already said in the comments see.

Suppose the last field has the attribute ID defined as codigo, it is the last to be filled and the last to be given TAB, so he’s the last to lose focus.

// Quando o input[id='codigo'] perde o foco
$("#codigo").on('blur', function(e) {
    var valor = $(this).val();
    // Verifica os cinco últimos caracteres
    if (valor.slice(-5) === '+++++') {
        // Se é igual executa uma ação
        $("form").submit();
    }
});

See working

$("#codigo").on('blur', function(e) {
  var valor = $(this).val();
  // Verifica os cinco últimos caracteres
  if (valor.slice(-5) === '+++++') {
    // Se é igual executa uma ação
    console.log('ENVIAR FORMULARIO');
    console.log('+------------------------------+');
    console.log('PRODUTO: '+$("#nome").val());
    console.log('VALOR  : '+$("#valor").val());
    console.log('CÓDIGO : '+$("#codigo").val());
    console.log('+------------------------------+');
    $("input[type='text']").val('');
    // $("form").submit();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="teste" method="post">
  <div>Nome</div>
  <input type="text" id="nome" />
  <div>Valor</div>
  <input type="text" id="valor" />
  <div>Código</div>
  <input type="text" id="codigo" />
  <input type="button" value="enviar" id="btnEnviar" />
</form>

Reference

• Slice