Input Autofocus on type

Question

Good Evening and thanks all in advance!

i have this input:

<div class="ref-control">
    <h3>Por Favor passe o passe o cartão pelo leitor</h3>
    <form>
        <label for="leitura-nim"> Leitura de Nim
            <input tabindex="99" autofocus type="text" name="leitura-nim" id="leitura_nim" />
        </label>
    </form>
</div>

and this input get's autofocus when the page is loaded, so far so good, my problem is, when the user click outside the input, i need it to become autofocus again when the user press a key on keyboard or when the input is recived from some device(it is the same as typing it is tested), so far i got this js, but it does not enable the focus on keypress.

var leituraNim = $('#leitura_nim');

leituraNim.on('keypress', function() {
    document.getElementById('leitura_nim').contentEditable = true;
    document.getElementById('leitura_nim').focus();


});
leituraNim.on('keyup', function() {

    if (leituraNim.value.length == 8) {
        leituraNim.submit();
    }
});

can you guys help me out?

thanks Rob

Answer 1

Try something like I have below. Note the extra #form ID tag for <form id="form">. I think what you're trying to achieve is focus on any keypress when the input is not already focused, if so, $(document).on("keypress") should do the trick.

$(function() {
  $(document).on("keypress", function() {
    $("#leitura_nim").focus();
  });
  
  $("#leitura_nim").on("keyup", function() {
    if($(this).val().length == 8) {
      $("#form").submit();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ref-control" >
<h3>Por Favor passe o passe o cartão pelo leitor</h3>
<form id="form">
<label for="leitura-nim"> Leitura de Nim
<input tabindex="99" autofocus type="text" name="leitura-nim" id="leitura_nim"  />
</label>
</form>
</div>

Answer 2

this inside is the DOM node of the element, so there is no need to look it up. getElementById does not use # and binding events inside others is a bad idea because on every keypresss you would bind another event. They do not get overwritten, and a jQuery object does not have a .value

var leituraNim = $('#leitura_nim');
leituraNim.on('keypress', function() {
    this.contentEditable=true;  //not sure what this will do since it is an input 
    this.focus();  //If keypress is executed, shouldn't it already be focused?
}).on("keyup", function () {
   if (this.val.length == 8) {
       leituraNim.submit();
   } 
});

And as my comments state, seems like the stuff inside of the keypress does not make sense. What you want to do is listen for keypress events that are NOT inside of the input.

var leituraNim = $('#leitura_nim');
leituraNim.on("keyup", function () {
   if (this.val.length == 8) {
       leituraNim.submit();
   } 
});

$(window).on("keydown", function (evt) {
    var cTarget = evt.currentTarget;  //check where event originated from
    if (cTarget.is(leituraNim)) return;  //if input, than ignore
    leituraNim.focus();  //if not than focus input
});

Answer 3

I tried this on jsFiddle and I think this it is what you are looking for:

HTML

<div class="ref-control" >
   <h3>Por Favor passe o passe o cartão pelo leitor</h3>
   <form id="leitura-form">
      <label for="leitura-nim"> Leitura de Nim
      <input tabindex="99" autofocus type="text" name="leitura-nim" id="leitura_nim"/>
      </label>
   </form>
</div>

JavaScript

$(document).on('keypress', function() {
  $('#leitura_nim').contentEditable = true;
  $('#leitura_nim').focus();
});

$('#leitura_nim').on('keyup', function() {
  if ($(this).val().length == 8) {
    $("#leitura-form").submit();
  }
});

Answer 4

you can use

document.onkeypress = function (e) {
    document.getElementById("leitura_nim").focus();
};

Answer 5

$(document).on("keyup", function(e) {
        document.getElementById('leitura_nim').focus();

    });