JQuery monitoring keystrokes

Question

JQuery monitoring keystrokes

Navigation

#1 by (4 votes)
#2 by (4 votes)
#3 by (3 votes)

4

I'm making a form, where the data is entered through scanning bar codes (default code 128).

After scanning each value, the hand scanner is already configured to give <TAB> and move to the next field, making it very convenient to use this form repetitively.

But the ENTER must be via keyboard. Losing that sequence of agile records. So I thought of creating a barcode with a sequence of values in which through a javascript function I would understand that this is a sign of ENTER , eg: In the code it would be '++++++' so when scanning this value JQuery would understand this sequence and would submit the form.

But unfortunately it did not 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 on Fiddle link

jquery code128

asked by anonymous 31.10.2017 / 19:31

3 answers

4

Another way to solve your problem without having to set up a special code would be to check that all inputs of form are filled out and if so, 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();
  }
});

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 value of the input and compare it 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><formid="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>

06.11.2017 / 16:31

3

After scanning each value, the hand scanner is already configured to and move to the next field, making it very convenient to use this form repetitively.

So I think the solution would be as already said in the comments see.

Let's suppose that the last field has the ID attribute set to codigo , it is the last to be filled and the last to be given TAB , so is 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><formid="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

10.11.2017 / 11:22

How to stylize the "clean" icon of the input type search? Check for data in column [closed]

score 4 · Accepted Answer

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

$(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>

By event keydown was not able to check which key was pressed, in event keypress gave right.