Javascript 当焦点在 HTML 表单上丢失时，如何重新聚焦到文本字段？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2605974/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to re-focus to a text field when focus is lost on a HTML form?
提问by ohho
There is only one text field on a HTML form. Users input some text, press Enter, submit the form, and the form is reloaded. The main use is barcode reading. I use the following code to set the focus to the text field:
HTML 表单上只有一个文本字段。用户输入一些文本，按 Enter，提交表单，然后重新加载表单。主要用途是条码读取。我使用以下代码将焦点设置到文本字段：
<script language="javascript">
<!--
document.getElementById("#{id}").focus()
//-->
</script>
It works most of the time (if nobody touches the screen/mouse/keyboard).
它大部分时间都有效（如果没有人触摸屏幕/鼠标/键盘）。
However, when the user click somewhere outside the field within the browser window (the white empty space), the cursor is gone. One a single field HTML form, how can I prevent the cursor from getting lost? Or, how to re-focus the cursor inside the field after the cursor is lost? thx!
但是，当用户单击浏览器窗口中字段外的某处（白色空白区域）时，光标消失了。一个单字段的HTML表单，如何防止光标丢失？或者，光标丢失后如何将光标重新聚焦在字段内？谢谢！
回答by bobince
Darin's answer is right, but doesn't work in Firefox. If you want to steal focus back in Firefox too, you have to delay it until after the event:
Darin 的回答是正确的，但在 Firefox 中不起作用。如果您也想在 Firefox 中窃取焦点，则必须将其延迟到事件之后：
<input onblur="var that= this; setTimeout(function() { that.focus(); }, 0);">
Or, better, assigned from JavaScript:
或者，更好的是，从 JavaScript 分配：
<script type="text/javascript">
var element= document.getElementById('foo');
element.focus();
element.onblur= function() {
setTimeout(function() {
element.focus();
}, 0);
};
</script>
But, I would strongly advise you not to do this. Clicking outside a text box to remove focus from that text box is perfectly normal browser behaviour, which can be of legitimate use (eg. to set search point for ctrl-F, or start a drag-selection, etc). There's very unlikely to be a good reason to mess with this expected behaviour.
但是，我强烈建议您不要这样做。在文本框外部单击以从该文本框中移除焦点是完全正常的浏览器行为，这可能是合法用途（例如，为 ctrl-F 设置搜索点，或开始拖动选择等）。不太可能有充分的理由来干扰这种预期的行为。
回答by Darin Dimitrov
<input type="text" name="barcode" onblur="this.focus();" />
回答by T.J. Crowder
You can hook the blurevent and refocus the field again. There are very few use cases for doing this, but it sounds like yours may be one of them. Note that you'll probably have to schedule the re-focus via setTimeoutor similar, you won't be able to do it within the blurhandler itself.
您可以挂钩blur事件并再次重新聚焦该字段。这样做的用例很少，但听起来您的可能是其中之一。请注意，您可能必须通过setTimeout或类似方式安排重新聚焦，您将无法在blur处理程序本身内进行。
When doing this without affecting the markup, this is easiest if you use a library like Prototype, jQuery, Closure, etc., but you can do it without them (of course), you just have to handle browser differences yourself. For instance, using Prototype:
在不影响标记的情况下执行此操作时，如果您使用Prototype、jQuery、Closure等库，这是最简单的，但您可以在没有它们的情况下执行此操作（当然），您只需要自己处理浏览器差异。例如，使用原型：
document.observe("dom:loaded", function() {
var elm = $('thingy');
elm.focus();
elm.observe('blur', function() {
refocus.defer(elm);
});
function refocus(elm) {
elm.focus();
}
});
If you don't mind affecting the markup, you can use the onblurattribute. For instance, this works on IE, Firefox, and Chrome at least (probably others):
如果您不介意影响标记，则可以使用该onblur属性。例如，这至少适用于 IE、Firefox 和 Chrome（可能其他）：
HTML:
HTML：
<input type='text' id='thingy' onblur="refocus(this);">
Script:
脚本：
function refocus(elm) {
setTimeout(go, 0);
function go() {
elm.focus();
}
}
