CODEWITHSUNDEEP
javascriptjqueryhtmlinputautofocus
RSamurai
RSamurai

Reputation: 23

Input Autofocus on type

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

Upvotes: 2

Views: 3823

Answers (5)

Alvaro Fla&#241;o Larrondo
Alvaro Fla&#241;o Larrondo

Reputation: 5734

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();
  }
});

Upvotes: 1

Keerthi
Keerthi

Reputation: 923

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

    });

Upvotes: 0

epascarello
epascarello

Reputation: 207527

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

Upvotes: 0

mswieboda
mswieboda

Reputation: 1036

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>

Upvotes: 3

Amit.rk3
Amit.rk3

Reputation: 2417

you can use

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

Upvotes: 2

Related Questions