输入自动对焦类型答案

【问题标题】：Input Autofocus on type输入自动对焦类型
【发布时间】：2015-06-08 21:38:29
【问题描述】：

晚上好，提前谢谢大家！

我有这个输入：

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

你们能帮帮我吗？

谢谢罗伯

【问题讨论】：

getElementId 不使用 # 并且 leituraNim 是一个 jQuery 对象，它没有 .value
我尝试了有无。但我现在要删除它。
您还将绑定多个 keyup 事件到元素。不要在事件中绑定事件。
好的，我应该先使用按键而不是按键？
在输入之外，您必须将 keypress 事件绑定到窗口/文档而不是框，因为 keypress 事件只监听输入字段。

标签： javascript jquery html input autofocus

【解决方案1】：

试试我下面的方法。注意<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>

【讨论】：

【解决方案2】：

你可以使用

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

【讨论】：

【解决方案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();
  }
});

【讨论】：

这似乎更接近，但我认为仍然在单独的事件处理程序上拥有 keyup，与文档 keypress 分开
谢谢，它工作得很好，它在这里显示了 Tyr 在我帖子的 cmets 上所说的话。当我更改为文档并删除 getElementsById 时，它工作正常。谢谢大家，是你们一直让我想了解更多关于编程的知识。

【解决方案4】：

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

正如我的 cmets 所说，按键内部的东西似乎没有意义。您要做的是侦听不在输入内的按键事件。

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

【讨论】：

【解决方案5】：

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

    });

【讨论】：