JavaScript mengatur fokus ke elemen bentuk HTML

332

Saya memiliki formulir web dengan kotak teks di dalamnya. Bagaimana cara menetapkan fokus ke kotak teks secara default?

Sesuatu seperti ini:

<body onload='setFocusToTextBox()'>

jadi adakah yang bisa membantu saya dengan itu? Saya tidak tahu cara mengatur fokus ke kotak teks dengan JavaScript.

<script>
function setFocusToTextBox(){
//What to do here
}
</script>
javascript html textbox focus tenstar
sumber
21
Sesederhana document.getElementById('your_text_box_id').focus();.
Teemu

Jawaban:

576

Melakukan hal ini.

Jika elemen Anda adalah sesuatu seperti ini ..

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

Script Anda akan menjadi

<script>
function setFocusToTextBox(){
    document.getElementById("mytext").focus();
}
</script>
mohkhan
sumber
3
Anda harus memindai dokumen menggunakan bagian lain dari API Web (misalnya Document.forms, Document.getelementsByTagNameatau Node.childNodes) dan mengandalkan struktur dokumen yang diketahui atau mencari beberapa properti elemen tertentu.
peterph
40
Atau jawaban yang jelas ... berikan ID;)
Relevan
4
Saya akan menyarankan agar tidak menggunakan ID karena itu lebih ditentukan. Alih-alih menggunakan nama atau bahkan kelas. Dalam hal ini Anda akan menggunakan document.querySelector ("[name = 'myText']") atau document.querySelector (". MyText") untuk mendapatkan referensi ke elemen input.
Chris Love
12
@ChrisLove Saran yang menarik. Mengapa memiliki id "lebih spesifik" dan apa, sebenarnya, masalahnya? Lebih sederhana, lebih tepat dan kode untuk menemukannya, akan sedikit lebih cepat, dengan ID. Kedengarannya seperti hal yang paling jelas dan masuk akal untuk dilakukan, bagi saya - jika mungkin.
PandaWood
4
@ChrisLove ini tidak terlalu menentukan pemilih CSS, itu menetapkan atribut ID HTML - kekhususan adalah masalah dalam cara pemrosesan CSS mem-parsing pemilih DOM, bukan masalah dengan bagaimana atribut ID dan kelas bekerja dalam HTML. Tidak disarankan untuk menggunakan penyeleksi DOM yang sama untuk melampirkan CSS seperti halnya untuk melampirkan JS, yang berarti Anda dapat mempertahankan diferensiasi yang Anda gambarkan
Toni Leigh
142

Untuk apa nilainya, Anda dapat menggunakan autofocusatribut pada browser yang kompatibel dengan HTML5. Bekerja bahkan di IE pada versi 10.

<input name="myinput" value="whatever" autofocus />
oliver yang lebih baik
sumber
51
Ingat, ini hanya berfungsi untuk mengatur fokus saat halaman dimuat pertama kali; itu tidak dapat digunakan untuk mengatur fokus nanti sebagai respons terhadap input.
Martin Carney
Saya khawatir atribut autofocus tidak kompatibel jika IOS Safari ( caniuse.com/#search=autofocus ) sementara .focus () hanya tidak kompatibel dengan Opera Mini ( caniuse.com/#search=focus )
lfrodrigues
3
Perhatikan bahwa jika Anda mencoba fokus dari konsol maka itu tidak mungkin!
Atau Choban
65

Biasanya ketika kita fokus pada kotak teks, kita juga harus menggulir ke tampilan

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

Periksa apakah itu membantu.

Khanh TO
sumber
2
Ini bisa menjadi sakit kepala nyata di layar yang lebih kecil jika bidangnya mati :-)
Toni Leigh
Jika Anda memiliki bilah tajuk yang diperbaiki, Anda mungkin perlu menggunakan textbox.scrollIntoView (false) ini cukup menetapkan elemen ke bawah, bukan atas.
DeadlyChambers
30

Jika kode Anda adalah:

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

Dan Jika Anda menggunakan JQuery, Anda dapat menggunakan ini juga:

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

Ingatlah bahwa Anda harus menarik input terlebih dahulu $(document).ready()

Richard Rebeco
sumber
11
Saya menurunkan ini, karena tidak ada implikasi jQuery dalam pertanyaan dasar. OP ingin tetap murni javascript
Fallenreaper
11
Nah, Anda punya alasan, saya salah, tetapi saya pikir itu tetap membantu.
Richard Rebeco
4
Saya upvoting ini karena dalam proyek-proyek di mana jQuery sudah digunakan dan Anda elemen sebagai objek pemilihan jQuery, lebih baik untuk konsisten daripada menggunakan vanilla JS.
paradite
8
@Fallenreaper Downvotes adalah untuk egregiously sloppy, no-effort-expended post, or an answer that is clearly and perhaps dangerously incorrect, menurut pusat bantuan stackoverflow. Saya menemukan ini di dekat kategori-kategori itu. Membantu tidak terbatas pada OP, bukan?
Gellie Ann
@GellieAnn Meskipun ini adalah jawaban, ia berada di luar ruang lingkup pertanyaan OP. Ada alasan mengapa dia menggunakan javascript vanilla, dan sementara Anda dapat menyebutkan kerangka kerja lain dan memberikan petunjuk atau petunjuk untuk mengarah ke satu dan memberikan alasan mengapa, Anda masih harus menyelesaikan jawaban dari dalam batas-batas pertanyaan yang diajukan. Karena itu, saya mendukung downvote saya.
Fallenreaper
20

Untuk Javascript biasa, coba yang berikut ini:

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

Saya dulu hanya menggunakan ini:

<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>

Yang mengatakan, Anda bisa menggunakan atribut autofocus di HTML 5.

Harap dicatat: Saya ingin memperbarui utas lama ini dengan menampilkan contoh yang ditanyakan plus pembaruan yang lebih baru dan lebih mudah bagi mereka yang masih membaca ini. ;)

RajnishCoder
sumber
1

Seperti disebutkan sebelumnya, document.forms juga berfungsi.

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

setFocusToTextBox( 0 );
// sets focus on first element of the form
Mac
sumber
Formulir AFAIK tidak memiliki atribut "nama"
Marecky
Formulir telah memiliki "nama" untuk waktu yang lama sekarang, dan dalam HTML5, masih ada. Lihat w3.org/TR/html5/forms.html#the-form-element
Mac
1

Jika atribut Anda <input>atau <textarea>memiliki, id=mytextgunakan

mytext.focus();

Tampilkan cuplikan kode

Kamil Kiełczewski
sumber
0

window.onload adalah untuk menempatkan fokus pada awalnya blur adalah untuk menempatkan fokus saat Anda mengklik di luar textarea, atau menghindari blur area teks

    <textarea id="focus"></textarea>
    <script>
     var mytexarea=document.getElementById("focus");
    window.onload=function()
    {

    mytexarea.focus();

    }

mytextarea.onblur=function(){

mytextarea.focus();

}
    </script>
ßãlãjî
sumber