JavaScript將焦點設置爲HTML表單元素

238

我有一個帶有文本框的Web表單。默認情況下，如何將焦點設置到文本框？JavaScript將焦點設置爲HTML表單元素

是這樣的：

<body onload='setFocusToTextBox()'>

所以任何人可以幫助我呢？我不知道如何使用JavaScript將焦點設置到文本框中。

<script> 
function setFocusToTextBox(){ 
//What to do here 
} 
</script>

來源

2013-07-06 tenstar

+13

就像'document.getElementById（'your_text_box_id'）。focus（）;'一樣簡單。 – Teemu

422

執行此操作。

如果你的元素是這樣的..

<input type="text" id="mytext"/>

你的腳本將

<script> 
function setFocusToTextBox(){ 
    document.getElementById("mytext").focus(); 
} 
</script>

來源

2013-07-06 07:21:02 mohkhan

如果文本框沒有ID，那怎麼辦？ –

您必須使用Web API的其他部分掃描文檔（例如['Document.forms']（https://developer.mozilla.org/en-US/docs/Web/API/document.forms），['Document.getelementsByTagName']（https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByTagName）或['Node.childNodes']（https：//developer.mozilla）。 org/en-US/docs/Web/API/Node.childNodes）），並依靠已知的文檔結構或查找某些元素特定的屬性。 – peterph

+26

或明顯的答案...給它的ID） – Relevant

對於普通的JavaScript，請嘗試以下操作：

window.onload = function() { 
    document.getElementById("TextBoxName").focus(); 
};

來源

2013-07-06 07:21:42 sipp

通常，當我們關注在文本框中，我們也應該滾動到視圖

function setFocusToTextBox(){ 
    var textbox = document.getElementById("yourtextbox"); 
    textbox.focus(); 
    textbox.scrollIntoView(); 
}

檢查是否有幫助。

來源

2013-07-06 07:25:28

如果字段在屏幕外，這可能會導致真正的頭疼:-) –

如果您有一個固定的標題欄，則可能需要使用textbox.scrollIntoView（false），它只是將元素設置爲底部而不是頂部。 – DeadlyChambers

106

值得一提的是，您可以在兼容HTML5的瀏覽器上使用autofocus屬性。作品即使在IE的版本10

<input name="myinput" value="whatever" autofocus />

來源

2013-07-06 07:30:03 zeroflagL

+35

請記住，這隻適用於頁面第一次加載時設置焦點;它不能用於稍後響應輸入來設置焦點。 –

恐怕自動對焦屬性不兼容，如果IOS Safari（https://caniuse.com/#search=autofocus），而.focus（）只是與Opera Mini不兼容（https://caniuse.com/#search=焦點） – lfrodrigues

正如前面提到的，document.forms工作過。

function setFocusToTextBox(_element) { 
    document.forms[ 'myFormName' ].elements[ _element ].focus(); 
} 

setFocusToTextBox(0); 
// sets focus on first element of the form

來源

2014-12-22 15:22:28 Mac

AFAIK表單沒有「名稱」屬性 – Marecky

表單現在已經有很多「名字」了，而在HTML5中，他們仍然有。見http://www.w3.org/TR/html5/forms.html#the-form-element – Mac

如果你的代碼是：

<input type="text" id="mytext"/>

，如果你正在使用JQuery，你可以用這個太：

<script> 
function setFocusToTextBox(){ 
    $("#mytext").focus(); 
} 
</script>

請記住，你必須先畫出輸入（ $（document）.ready（））

來源

2015-03-10 18:32:17

我downvoted這一點，因爲遠程沒有在基地問題上沒有的jQuery的含義。操作系統想要保持純粹的JavaScript – Fallenreaper

那麼，你有理由，我錯了，但我認爲它有幫助無論如何。 –

我upvoting這是因爲在項目中的jQuery已被使用，您元素作爲jQuery的選擇對象，這是更好地爲** **保持一致，而不是使用香草JS。 – paradite

我以前只是用這個：

<html> 
<head> 
<script type="text/javascript"> 
function focusFieldOne() { 
document.FormName.FieldName.focus(); 
} 
</script> 
</head> 

<body onLoad="focusFieldOne();"> 
<form name="FormName"> 
Field <input type="text" name="FieldName"> 
</form> 
</body> 
</html>

這就是說，你可以使用自動對焦屬性在HTML 5

請注意：我想更新顯示要求例如增加對那些還在讀這些較新的，更易於更新這一舊線。 ;）

來源

2016-07-08 02:10:07

JavaScript將焦點設置爲HTML表單元素

回答

相關問題