当用户使用JavaScript键入内容时，如何设置以搜索输入为中心

How to set search input focused when user typed something using JavaScript?

本文关键字：设置 何设置 为中心 输入 搜索 JavaScript 用户      更新时间：2023-12-19

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

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

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

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

在keydown之前不需要事件，只需使用keydown:即可

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

请参阅这个jsfiddle示例

是的，如果您向窗口对象添加一个事件侦听器，这是可能的。

示例：

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事件时才会对字符进行压印。

您也不需要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/

相关文章：