如何使用jQuery在頁面加載時專注於表單輸入文本字段？

186

這可能很簡單，但有人可以告訴我如何讓頁面加載時的文本框上的光標閃爍？如何使用jQuery在頁面加載時專注於表單輸入文本字段？

2009-10-20 chris

+81

我們不介意在這裏簡單的問題。 – DOK 2009-10-20 00:53:31

檢查來自sohail arif的回覆，下面的鏈接：http://stackoverflow.com/questions/18054459/how-to-place-the-cursor-auto-focus-in-text-box-when-a-page-gets-加載 - 沒有 – 2016-05-30 20:18:21

292

將焦點設置在第一個文本字段：

$("input:text:visible:first").focus();

這也做第一個文本字段，但你可以改變的[0]到另一個指標：

$('input[@type="text"]')[0].focus();

或者，你可以使用ID：

$("#someTextBox").focus();

來源

2009-10-20 00:52:41 DOK

+15

「如何.... **使用Jquery **」 – pjmil 2014-05-23 05:43:15

如果使用對話框，請參閱此答案如果上述不起作用http://stackoverflow.com/a/20629541/966609 – 2014-08-04 15:46:06

'$（'input [ （0）.focus（）;'...爲我工作 – Rav 2016-08-28 09:53:08

肯定的：

<head> 
    <script src="jquery-1.3.2.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $("#myTextBox").focus(); 
     }); 
    </script> 
</head> 
<body> 
    <input type="text" id="myTextBox"> 
</body>

來源

2009-10-20 00:51:10 Pandincus

HTML：

<input id="search" size="10" />

的jQuery：

$("#search").focus();

來源

2009-10-20 00:51:18 brendan

如果使用html5，只需在輸入元素中添加'autofocus'屬性？ – 2018-02-13 15:40:23

想想你之前，你的用戶界面做這個。我假設（儘管沒有答案已經這麼說），當文檔使用jQuery的ready()函數加載時，您將會這樣做。如果用戶在文檔加載之前已經將注意力集中在了不同的元素上（這是完全可能的），那麼讓他們的焦點被盜走是非常令人惱怒的。

您可以通過添加在每個<input>元素onfocus屬性來記錄用戶是否已經集中在一個窗體域，然後不偷重點檢查這個，如果他們有：

var anyFieldReceivedFocus = false; 

function fieldReceivedFocus() { 
    anyFieldReceivedFocus = true; 
} 

function focusFirstField() { 
    if (!anyFieldReceivedFocus) { 
     // Do jQuery focus stuff 
    } 
} 


<input type="text" onfocus="fieldReceivedFocus()" name="one"> 
<input type="text" onfocus="fieldReceivedFocus()" name="two">

來源

2009-10-20 08:51:18

感謝這一點。這是一個很好的補充！ – chris 2009-10-21 02:19:13

你的觀點不僅在技術上是正確的，而且你對最好的UX可能的考慮是精緻的。好樣的！ – Maviza101 2017-02-06 10:42:58

對不起碰到一個老問題。我通過谷歌找到了這個。

其值得注意的是，它可能使用多個選擇器，因此您可以定位任何表單元素，而不只是一個特定的類型。

例如。

$('#myform input,#myform textarea').first().focus();

這將關注它找到的第一個輸入或textarea，當然你也可以在混合中添加其他選擇器。 Hnady如果你不能確定某個特定的元素類型是否是第一個，或者你想要某些通用/可重用的東西。輸入

<script type="text/javascript">document.formname.inputname.focus();</script>

來源

2013-04-07 21:45:17

優秀建議@安德魯。 – DOK 2013-05-03 12:10:17

地方爲什麼使用jQuery簡單的東西，因爲這每一個人。

<body OnLoad="document.myform.mytextfield.focus();">

來源

2013-08-16 01:34:59

後

來源

2013-09-09 09:09:48

+1最簡單的方法！ – 2014-04-21 06:24:19

因爲問題被標記爲jQuery。 – 2018-02-13 15:41:15

這是我喜歡使用：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#fieldID").focus(); 
    }); 
</script>

來源

2014-01-15 16:52:49 SynD

這是不好的方式做事，專注於文件加載，只需使用HTML5提供的'autofocus'屬性 – OverCoder 2016-05-24 10:43:36

您可以使用HTML5 autofocus這一點。你不需要jQuery或其他JavaScript。

<input type="text" name="some_field" autofocus>

注意這不適用於IE9及更低版本。

來源

2014-10-12 23:58:31

自動對焦在IE11中無效https://stackoverflow.com/questions/34068302/autofocus-attribute -on輸入場 - 不工作，在-IE-11 – 2018-01-09 23:03:11

簡單而最簡單的方法來實現這一

$('#button').on('click', function() { 
    $('.form-group input[type="text"]').attr('autofocus', 'true'); 
});

來源

2018-02-13 06:31:09

如何使用jQuery在頁面加載時專注於表單輸入文本字段？

回答

相關問題