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

你能帮助我吗？

感谢Rob

Answer 1

尝试下面的内容。请注意#form的额外<form id="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 2

你可以使用

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

Answer 3

我在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 4

this inside是元素的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 5

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

    });

在类型上输入自动对焦

5 个答案: