当用户使用 JavaScript 键入内容时如何设置搜索输入焦点?
How to set search input focused when user typed something using JavaScript?
我创建了一个应用程序来列出所有产品,用户可以使用不同的方式搜索产品,其中一种是扫描条形码,通常,用户应该专注于搜索输入并扫描条形码,这工作正常。
但是当输入(搜索输入)未获得焦点时,我想将其设置为默认值,以便当用户键入内容或扫描条形码时,此输入在按下或按键之前获得焦点。
这可能吗?例如,如果我们可以在 (keydown) 或 (keypress) 之前获得一个事件,那么我们就可以很容易地专注于输入。
(如果用户使用 control+v 将默认搜索输入聚焦并粘贴到剪贴板上,则相同的想法)。
你不需要按键前的事件,你可以直接使用按键:
$(document).bind('keydown',function(e){
$('input').focus();
});
看到这个jsfiddle example
您也不需要 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>
是的,如果您向 window 对象添加一个事件侦听器,这是可能的。
示例:
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 事件时才会被打动。
我创建了一个应用程序来列出所有产品,用户可以使用不同的方式搜索产品,其中一种是扫描条形码,通常,用户应该专注于搜索输入并扫描条形码,这工作正常。
但是当输入(搜索输入)未获得焦点时,我想将其设置为默认值,以便当用户键入内容或扫描条形码时,此输入在按下或按键之前获得焦点。
这可能吗?例如,如果我们可以在 (keydown) 或 (keypress) 之前获得一个事件,那么我们就可以很容易地专注于输入。
(如果用户使用 control+v 将默认搜索输入聚焦并粘贴到剪贴板上,则相同的想法)。
你不需要按键前的事件,你可以直接使用按键:
$(document).bind('keydown',function(e){
$('input').focus();
});
看到这个jsfiddle example
您也不需要 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>
是的,如果您向 window 对象添加一个事件侦听器,这是可能的。
示例:
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 事件时才会被打动。