javascript - Input Autofocus on type - Stack Overflow

admin管理员组

文章数量:1387332

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 bee 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

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 bee 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

• javascript
• jquery
• html
• input
• autofocus

Share Improve this question Follow edited Jun 8, 2015 at 22:03 Sushil 2,83544 gold badges2222 silver badges2929 bronze badges asked Jun 8, 2015 at 21:38 RSamuraiRSamurai 2311 silver badge66 bronze badges 6

• 2 getElementId does not use # and leituraNim is a jQuery object and it does not have .value – epascarello Commented Jun 8, 2015 at 21:40
• i tried both with and without. but i am removing it now. – RSamurai Commented Jun 8, 2015 at 21:40
• 1 You are also going to be binding multiple keyup events to the element. Do not bind events inside of events. – epascarello Commented Jun 8, 2015 at 21:41
• ok i should first use the keypress one than the keyup one ? – RSamurai Commented Jun 8, 2015 at 21:43
• Out of the input you have to bind the keypress event to the window/document instead of the box, since the keypress event only listen to the input field. – Tyr Commented Jun 8, 2015 at 21:43

 |  Show 1 more ment

5 Answers 5

Sorted by: Reset to default 3

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

you can use

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

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

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

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

    });

本文标签： javascriptInput Autofocus on typeStack Overflow