在类型上输入自动对焦

Question

晚上好，谢谢大家！

我有这个输入：

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

并且此输入在页面加载时获得自动对焦，到目前为止一切顺利，我的问题是，当用户在输入外部单击时，我需要它在用户按下键盘上的某个键时或当输入是从某些设备接收的（它与测试的输入相同），到目前为止我得到了这个 js，但它没有启用按键上的焦点。

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

你们能帮帮我吗？

谢谢罗伯

Answer 1

this里面是元素的DOM节点，不用查了。 getElementById 不使用 # 并且在其他人内部绑定事件是一个坏主意，因为在每次按键时你都会绑定另一个事件。它们不会被覆盖，并且 jQuery 对象没有 .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();
   } 
});

正如我的评论所述，按键内部的内容似乎没有意义。你想要做的是监听不在输入内的按键事件。

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 2

我在 jsFiddle 上试过了，我想这就是你要找的：

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 3

你可以使用

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

Answer 4

尝试像我下面这样的东西。请注意 <form id="form"> 的额外 #form ID 标记。我认为您想要实现的是在输入尚未聚焦时聚焦于任何按键，如果是这样，$(document).on("keypress") 应该可以解决问题。

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

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

    });

在类型上输入自动对焦

Input Autofocus on type

html

javascript

jquery

input

autofocus