[英]How can I set focus on an element in an HTML form using JavaScript?
我有一個 web 表單，里面有一個文本框。 go 如何將焦點默認設置到文本框？
是這樣的：
<body onload='setFocusToTextBox()'>
所以有人可以幫我嗎？ 我不知道如何使用 JavaScript 將焦點設置到文本框。
<script>
function setFocusToTextBox(){
//What to do here
}
</script>
做這個。
如果你的元素是這樣的..
<input type="text" id="mytext"/>
你的腳本將是
<script>
function setFocusToTextBox(){
document.getElementById("mytext").focus();
}
</script>
對於它的價值，您可以在 HTML5 兼容瀏覽器上使用autofocus屬性。 從版本 10 開始，甚至可以在 IE 上運行。
<input name="myinput" value="whatever" autofocus />
通常當我們關注一個文本框時，我們也應該滾動到視圖中
function setFocusToTextBox(){
var textbox = document.getElementById("yourtextbox");
textbox.focus();
textbox.scrollIntoView();
}
檢查它是否有幫助。
如果您的代碼是：
<input type="text" id="mytext"/>
如果您使用的是 JQuery，您也可以使用它：
<script>
function setFocusToTextBox(){
$("#mytext").focus();
}
</script>
請記住，您必須先繪制輸入$(document).ready()
對於普通的 Javascript，請嘗試以下操作：
window.onload = function() {
document.getElementById("TextBoxName").focus();
};
我曾經只是使用這個：
<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 中使用 autofocus 屬性。
請注意：我想更新這個舊線程，顯示所詢問的示例，以及為仍在閱讀本文的人提供更新、更簡單的更新。 ;)
如前所述， document.forms 也能工作。
function setFocusToTextBox( _element ) {
document.forms[ 'myFormName' ].elements[ _element ].focus();
}
setFocusToTextBox( 0 );
// sets focus on first element of the form
如果您的<input>或<textarea>具有屬性id=mytext然后使用
mytext.focus();
function setFocusToTextBox() { mytext.focus(); }
<body onload='setFocusToTextBox()'> <form> <input type="text" id="mytext"/> </form> </body>
這個例子對我有用
$(document).ready(function () {
document.getElementById('TextBox').focus();
}
window.onload 最初是將焦點放在 onblur 是在您單擊文本區域外時將焦點放在焦點上，或者避免文本區域模糊
<textarea id="focus"></textarea>
<script>
var mytexarea=document.getElementById("focus");
window.onload=function()
{
mytexarea.focus();
}
</script>
試試這個：
$('.modal').on('shown.bs.modal', function () {
setTimeout(function() {
$("input#yourFieldId").addClass('modal-primary-focus').focus();
},
500);
});
想分享這個主題的一些邊緣案例。 如果您的內容正在重新加載（示例來自 API 的動態 DOM 加載結果並將焦點設置在結果的第一項上）添加屬性autofocus將不是您的解決方案，它僅適用於第一次加載，第二次 DOM 更改將不起作用但在 static DOM 中工作正常或單頁加載。 如果你有動態組件加載數據，簡單的.focus()將失敗，因為在 focus() 尚未創建時觸發對元素的關注，或者 blur 尚未由 DOM 完成。 對於這種情況，預期的是添加延遲時間（setTimeout 函數），以便為焦點提供時間以應用於 DOM 中新創建或重新創建的元素。 我的案例是從 API 加載數據並關注第一個結果。 添加var el = document.getElementById(focusId); el.focus(); var el = document.getElementById(focusId); el.focus(); 解決了這個問題，因此 DOM 可以在不增加延遲的情況下完成模糊。
<input type="text" class="word"> //html code
let theinput = document.querySelector(".word"); //Get the input
theinput.focus(); // focus on input
如何使用JavaScript將焦點設置為表單中的某個元素？
[英]How can I set the focus to a certain element in a form using JavaScript?
當我使用JavaScript單擊鏈接時，如何在contact.html頁面中設置表單元素的值？
[英]How to set the value of a form element in contact.html page, when I click a link using javascript?
如何將焦點設置為獨立於 id 的 HTML 表單中的第一個輸入元素？
[英]How do I set the focus to the first input element in an HTML form independent from the id?
如何設置 HTML 的默認值<select>元素與 JavaScript？
[英]How can I set the default value for an HTML <select> element with JavaScript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.