当用户使用 JavaScript 输入内容时，如何设置搜索输入为焦点？答案

【问题标题】：How to set search input focused when user typed something using JavaScript?当用户使用 JavaScript 输入内容时，如何设置搜索输入为焦点？
【发布时间】：2016-04-03 13:28:12
【问题描述】：

我创建了一个应用程序来列出所有产品，用户可以使用不同的方式搜索产品，其中一种是扫描条形码，通常，用户应该专注于搜索输入并扫描条形码，这很好。

但是当输入（搜索输入）没有聚焦时，我想将其设为默认值，以便当用户输入内容或扫描条形码时，此输入在 keydown 或 keypress 之前得到聚焦。

这可能吗？例如，如果我们可以在 (keydown) 或 (keypress) 之前获得一个事件，那么我们可以很容易地专注于输入。

（如果用户使用 control+v 从剪贴板粘贴文本，默认搜索输入聚焦并粘贴到它，则相同的想法）。

【问题讨论】：

标签： javascript jquery keyboard-events

【解决方案1】：

keydown之前不需要事件，直接使用keydown即可：

$(document).bind('keydown',function(e){
    $('input').focus();
});

看到这个jsfiddle example

【讨论】：

哇！我怎么错过了这个？粘贴呢？以及条形码扫描仪触发 keydown 的剂量？
粘贴也可以（你可以用 jsfiddle 试试）。不知道条形码扫描仪，因为我没有代码。
哦，是的，keydown 可以检测到控制键并且输入获得焦点，然后当按下 v 时，输入将粘贴在输入上...不错

【解决方案2】：

是的，如果你给窗口对象添加一个事件监听器是可能的。

例子：

jQuery(document).ready(function() {
  
  jQuery(window).keydown(function(ev) {
    
    if (ev.target.tagName === 'INPUT' || ev.target.tagName === 'TEXTAREA')
      return;
    
    jQuery('#mydefaulttextbox').focus()
      
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This is my default input:
<input id="mydefaulttextbox" type="text" />

<p>
This is another input:
<input type="text" />
</p>

之所以使用 keydown 绑定，是因为只有在收到 keyup 或 keypress 事件时才会给字符留下印象。

【讨论】：

【解决方案3】：

你也不需要 jQuery。

<input type='text' id='bar_code_input' name='bar_code_input' />
<script type='text/javascript'>
 document.addEventListener('keypress', function(){
    var bc_input = document.getElementById('bar_code_input');
    bc_input.focus();
 });
</script>

https://jsfiddle.net/5d51z8rr/

【讨论】：

这是正确的，但它肯定会丢失第一个字符并对其进行测试。
我以 keypress 为例，你可以使用任何你想要的事件。我还建议捕获事件本身，因为它可能对您正在做的事情有用。
当然@Laurens 有很多边缘情况，这也不考虑移动设备。