Bagaimana cara fokus pada bidang teks input formulir pada pemuatan halaman menggunakan jQuery?

238

Ini mungkin sangat sederhana, tetapi bisakah seseorang memberi tahu saya cara membuat kursor berkedip pada kotak teks pada pemuatan halaman?

javascript jquery html focus chris
sumber
96
Kami tidak keberatan dengan pertanyaan sederhana di sini.
DOK
Periksa balasan dari sohail arif di tautan di bawah ini: stackoverflow.com/questions/18054459/...
Sohail Arif

Jawaban:

378

Tetapkan fokus pada bidang teks pertama:

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

Ini juga melakukan bidang teks pertama, tetapi Anda dapat mengubah [0] ke indeks lain:

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

Atau, Anda dapat menggunakan ID:

$("#someTextBox").focus();
DOK
sumber
2
Jika menggunakan dialog, harap lihat jawaban ini jika di atas tidak berfungsi stackoverflow.com/a/20629541/966609
Matt Canty
1
$('input[type="text"]').get(0).focus(); ... bekerja untuk saya
Rav
92

Anda dapat menggunakan HTML5autofocus untuk ini. Anda tidak perlu jQuery atau JavaScript lainnya.

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

Catatan ini tidak akan berfungsi pada IE9 dan lebih rendah.

Andrew Liu
sumber
autofocus tidak berfungsi di IE11 baik stackoverflow.com/questions/34068302/…
BA TabNabber
Ini berfungsi untuk skenario saya tetapi jawaban yang dipilih tidak karena alasan tertentu.
Wisnu YS
27

Tentu:

<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>
Pandincus
sumber
2
Saya sarankan untuk membawa script setelah elemen html.
Ali Sheikhpour
1
Skrip @AliSheikhpour ada dalam pembungkus dom ready sehingga tidak masalah bahwa itu sebelum elemen html, tetapi tidak harus di kepala pula.
Popnoodles
22

Mengapa semua orang menggunakan jQuery untuk sesuatu yang sederhana seperti ini. 

<body OnLoad="document.myform.mytextfield.focus();">
TD_Nijboer
sumber
15
Karena pertanyaannya ditandai sebagai jQuery.
Adarsh ​​Madrecha
18

Pikirkan tentang antarmuka pengguna Anda sebelum Anda melakukan ini. Saya berasumsi (meskipun tidak ada jawaban yang mengatakan demikian) bahwa Anda akan melakukan ini ketika dokumen dimuat menggunakan ready()fungsi jQuery . Jika pengguna telah memfokuskan pada elemen yang berbeda sebelum dokumen dimuat (yang sangat mungkin) maka sangat menjengkelkan bagi mereka untuk memiliki fokus dicuri.

Anda bisa memeriksa ini dengan menambahkan onfocusatribut di masing-masing <input>elemen Anda untuk merekam apakah pengguna telah fokus pada bidang formulir dan kemudian tidak mencuri fokus jika mereka memiliki:

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">
Tim Down
sumber
2
Perspektif Anda tidak hanya benar secara teknis, tetapi pertimbangan Anda untuk UX terbaik mungkin sangat indah. Bravo!
Folusho Oladipo
12

HTML:

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

jQuery:

$("#search").focus();
brendan
sumber
1
jika menggunakan html5, cukup tambahkan autofocusatribut ke elemen input?
Adarsh ​​Madrecha
Bagaimana atribut itu digunakan, dan apakah itu akan menjadi elemen fokus segera setelah bentuk induknya muncul?
Khom Nazid
8

Maaf karena menabrak pertanyaan lama. Saya menemukan ini melalui google.

Perlu juga dicatat bahwa mungkin untuk menggunakan lebih dari satu pemilih, sehingga Anda dapat menargetkan elemen bentuk apa pun, dan bukan hanya satu jenis tertentu.

misalnya.

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

Ini akan memfokuskan input atau teks pertama yang ditemukannya, dan tentu saja Anda dapat menambahkan pemilih lain ke dalam campuran juga. Hnady jika Anda tidak dapat memastikan jenis elemen tertentu menjadi yang pertama, atau jika Anda menginginkan sesuatu yang agak umum / dapat digunakan kembali.

Andrew Calder
sumber
Saran bagus @Andrew.
DOK
6

Inilah yang saya lebih suka gunakan:

<script type="text/javascript">
    $(document).ready(function () {
        $("#fieldID").focus(); 
    });
</script>
poveilleux
sumber
3
Ini cara yang buruk untuk melakukan sesuatu, untuk fokus pada <input> pada pemuatan dokumen, cukup gunakan autofocusatribut yang disediakan oleh HTML5
OverCoder
3

tempat setelah input

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

Cara sederhana dan termudah untuk mencapai ini

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

Baris itu $('#myTextBox').focus()sendiri tidak akan meletakkan kursor di kotak teks, sebagai gantinya gunakan:

$('#myTextBox:text:visible:first').focus();
David Sopko
sumber