当 HTML 表单失去焦点时如何重新聚焦到文本字段？

Question

HTML 表单上只有一个文本字段。用户输入一些文本，按 Enter 键，提交表单，然后重新加载表单。主要用途是条码读取。我使用以下代码将焦点设置到文本字段：

<script language="javascript">
    <!--
            document.getElementById("#{id}").focus()
    //-->
</script>

它在大多数情况下都有效（如果没有人触摸屏幕/鼠标/键盘）。

但是，当用户单击浏览器窗口内字段之外的某个位置（白色空白区域）时，光标就会消失。一个单字段的HTML表单，如何防止光标丢失？或者，光标丢失后如何重新将光标聚焦在字段内？谢谢！

Answer 1

Darin 的答案是正确的，但在 Firefox 中不起作用。如果您也想在 Firefox 中夺回焦点，则必须将其推迟到事件发生之后：

<input onblur="var that= this; setTimeout(function() { that.focus(); }, 0);">

或者更好的是，从 JavaScript 分配：

<script type="text/javascript">
    var element= document.getElementById('foo');
    element.focus();
    element.onblur= function() {
        setTimeout(function() {
            element.focus();
        }, 0);
    };
</script>

但是，我强烈建议您不要这样做。单击文本框外部以从该文本框移除焦点是完全正常的浏览器行为，可以合法使用（例如，为 ctrl-F 设置搜索点，或开始拖动选择等）。不太可能有充分的理由来扰乱这种预期的行为。

Answer 2

<input type="text" name="barcode" onblur="this.focus();" />

Answer 3

您可以挂钩 blur 事件并再次重新聚焦该字段。这样做的用例很少，但听起来你的可能就是其中之一。请注意，您可能必须通过 setTimeout 或类似的方法安排重新聚焦，您将无法在 blur 处理程序本身中执行此操作。

在不影响标记的情况下执行此操作时，如果您使用像 Prototype、jQuery, 关闭等等，但你可以在没有它们的情况下做到这一点（当然），你只需要自己处理浏览器差异。例如，使用 Prototype：

document.observe("dom:loaded", function() {
    var elm = $('thingy');

    elm.focus();
    elm.observe('blur', function() {
        refocus.defer(elm);
    });

    function refocus(elm) {
        elm.focus();
    }
});

如果您不介意影响标记，则可以使用 onblur 属性。例如，这至少适用于 IE、Firefox 和 Chrome（也可能是其他浏览器）：

HTML：

<input type='text' id='thingy' onblur="refocus(this);">

脚本：

function refocus(elm) {

    setTimeout(go, 0);

    function go() {
        elm.focus();
    }
}