如何在HTML表單上丟失焦點時重新聚焦到文本字段？

HTML表單上只有一個文本字段。用戶輸入一些文本，按Enter，提交表單，然後重新加載表單。主要用途是條形碼讀取。我使用下面的代碼將焦點設置到文本字段：如何在HTML表單上丟失焦點時重新聚焦到文本字段？

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

它工作的大部分時間（如果沒有人觸摸屏幕/鼠標/鍵盤）。

但是，當用戶在瀏覽器窗口（白色空白區域）內的字段外點擊時，光標不見了。一個單獨的字段HTML表單，我該如何防止光標迷路？或者，如果在光標丟失後如何在光場內重新聚焦光標？謝謝！

來源

2010-04-09 ohho

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設置搜索點或啓動拖動選擇等）。這種預期的行爲不太可能是一個很好的理由。

來源

2010-04-09 08:53:00 bobince

您可以掛鉤blur事件並重新調整該字段的焦點。這樣做的用例很少，但聽起來像你可能是其中之一。請注意，您可能不得不通過setTimeout或類似計劃重新調整焦點，您將無法在blur處理程序本身中執行此操作。

在這樣做時不影響標記，這是最簡單的，如果你使用一個庫像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(); 
    } 
});

如果你不介意的話影響了標記，你可以使用onblur屬性。例如，這適用於IE，火狐和Chrome至少（或許還有其它）：

HTML：

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

腳本：

function refocus(elm) { 

    setTimeout(go, 0); 

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

來源

2010-04-09 08:31:03

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

來源

2010-04-09 08:31:15

至少在Firefox或Chrome上不起作用;焦點呼叫需要推遲。 – 2010-04-09 08:43:43

如何在HTML表單上丟失焦點時重新聚焦到文本字段？

回答

相關問題