Elemen fokus
Elemen mana yang bisa mendapatkan fokus? Secara default, hanya elemen bentuk yang bisa mendapatkan fokus. Karena hanya elemen bentuk yang dapat berinteraksi
<input type = "Text" value = "223">
Ada juga cara untuk mendapatkan fokus elemen non-bentuk. Pertama atur atribut tabIndex ke -1, lalu panggil metode focus() .
<Div ID = "test" style = "Tinggi: 30px; Lebar: 100px; latar belakang: lightgreen"> Div </div> <tombol id = "btn"> elemen div mendapat fokus </tombol> <script> btn.onClick = function () {test.tabIndex = -1; test.focus (); } test.onfocus = function () {this.style.background = 'pink';} </script>ActiveElement
Properti document.activeElement digunakan untuk mengelola DOM Focus dan menyimpan elemen -elemen yang saat ini mendapatkan fokus.
[Catatan] Properti ini tidak didukung oleh IE browser
<Div id = "test" style = "Tinggi: 30px; Lebar: 100px; latar belakang: lightgreen"> Div </div> <tombol id = "btn"> div elemen mendapat fokus </buttple> <script> console.log (document.activeElement); // <body> btn.onclick = function () {console.log); test.focus (); Console.log (Document.ActiveElement); // <div>} </script>Dapatkan fokus
Ada 4 cara bagi elemen untuk mendapatkan fokus, termasuk pemuatan halaman, input pengguna (tekan tombol tab tab), focus() dan properti autofocus
【1】 Pupisikan halaman
Secara default, ketika dokumen baru saja dimuat, referensi ke elemen tubuh disimpan dalam document.activeElement . Selama pemuatan dokumen, nilai document.activeElement adalah nol
<script> console.log (document.activeElement); // null </script> <body> <script> console.log (document.activeElement); // <body> </script> </body>
【2】 Input Pengguna (tekan tombol tab)
Pengguna biasanya dapat menggunakan tombol tab untuk memindahkan fokus dan menggunakan bilah ruang untuk mengaktifkan fokus. Misalnya, jika fokusnya adalah pada tautan, tekan bilah ruang angkasa saat ini dan akan melompat ke tautan
Ketika datang ke kunci tab, kita tidak boleh menyebutkan atribut tabindex . Atribut tabindex digunakan untuk menentukan apakah simpul elemen HTML saat ini dilintasi oleh kunci tab dan prioritas traversal
1. Jika tabindex=-1 , tombol tab melompati elemen saat ini
2. Jika tabindex=0 , itu berarti bahwa kunci tab akan melintasi elemen saat ini. Jika suatu elemen tidak mengatur tabindex , nilai default adalah 0
3. Jika tabindex lebih besar dari 0, itu berarti bahwa kunci tab dilalui terlebih dahulu. Semakin besar nilainya, semakin kecil prioritasnya
Dalam kode berikut, saat menggunakan tombol tab, urutan di mana tombol mendapat fokus adalah 2, 5, 1, dan 3
<Div id = "box"> <tombol tabIndex = "3"> 1 </button> <tombol tabindex = "1"> 2 </button> <tombol tabindex = "0"> 3 </button> <tombol tabIndex = "-1"> 4 </putton> <butePLOK = "2"> 5 </tombol </div> </tombolan. 'pink';} </script>
【3】 fokus ()
Metode focus() digunakan untuk mengatur fokus browser ke bidang formulir, yaitu mengaktifkan bidang formulir sehingga dapat merespons peristiwa keyboard.
[Catatan] Seperti yang disebutkan sebelumnya, jika itu bukan elemen formulir, diatur ke tabIndex ke -1, Anda juga bisa mendapatkan fokus
<span id = "test1" style = "tinggi: 30px; lebar: 100px;"> span </span> <input id = "test2" value = "input"> <button id = "btn1"> elemen rentang mendapat fokus </button> <tombol id = "btn2"> elemen input mendapat fokus </tombol> <mript> btn1.on = "btn2"> Input mendapat fokus </tombol> <script> btn1.on = "btn2"> Input mendapat fokus </button> <script> btn1.on = "btn2"> Input mendapat fokus </button> <script> BTN1.Onccl function () {test1.tabIndex = -1; test1.focus ();} btn2.onClick = function () {test2.focus ();} </script>【4】 Autofokus
Properti autofocus telah ditambahkan ke bidang formulir HTML5. Selama properti ini diatur, fokus dapat secara otomatis dipindahkan ke bidang yang sesuai tanpa JavaScript.
[Catatan] Atribut ini hanya dapat digunakan untuk elemen formulir. Bahkan jika elemen normal diatur ke tabIndex=”-1″ , itu tidak akan berlaku.
<Input Nilai Autofocus = "ABC">
hasfocus ()
Metode document.hasFocus() mengembalikan nilai boolean yang menunjukkan apakah ada elemen dalam dokumen saat ini yang diaktifkan atau diperoleh fokus. Dengan memeriksa apakah dokumen tersebut telah mendapatkan fokus, Anda dapat mengetahui apakah itu berinteraksi dengan halaman tersebut.
console.log (document.hasfocus ()); // true // klik pada tab lain dalam dua detik untuk membuat fokus meninggalkan settimeout halaman saat ini (function () {console.log (document.hasfocus ()); // false}, 2000);Kehilangan fokus
Jika Anda menggunakan JavaScript untuk kehilangan fokus, maka Anda perlu menggunakan metode blur()
Tujuan dari metode blur() adalah untuk menghapus fokus dari elemen. Saat memanggil metode blur() , fokus tidak akan ditransfer ke elemen tertentu; itu hanya untuk menghapus fokus dari elemen yang memanggil metode
<input id="test" type="text" value="123"><button id="btn1">input element gains focus</button><button id="btn2">input element loses focus</button><script>btn1.onclick = function(){test.focus();}btn2.onclick = function(){test.blur();}</script>Acara fokus
Acara fokus dipicu ketika halaman mendapatkan atau kehilangan fokus. Menggunakan acara ini dan bekerja sama dengan metode document.hasFocus() dan document.activeElement properti, Anda dapat mengetahui keberadaan pengguna pada halaman.
Acara fokus termasuk 4 berikut
1. Blur
Acara blur dipecat ketika elemen kehilangan fokus. Acara ini tidak akan menggelegak
2. Fokus
Acara focus dipecat ketika elemen mendapat fokus. Acara ini tidak akan menggelegak
3. Focusin
Acara focusin dipecat ketika elemen mendapatkan fokus. Acara ini setara dengan acara focus , tetapi menggelegak
4. Fokus
Acara focusour dipecat ketika elemen kehilangan fokus. Acara ini setara dengan acara Blur, tetapi menggelembung
[Catatan] Mengenai acara fokus dan fokus, kecuali untuk penangan acara IE Browser Level Event, browser lain hanya mendukung penangan acara tingkat DOM2
<div id="box"style="display:inline-block;padding:25px;background-color:lightgreen;"> <div id="boxIn" style="height: 50px;width: 50px;background-color:pink;">123</div></div><button id="btn1">Div element with content 123 gets focus</button><button id="btn2">Div element with content 123 Kehilangan Fokus </button> <tombol id = "reset"> restore </atton> <script> reset.onClick = function () {history.go ();} // focus () metode btn1.onClick = function () {boxin.tabindex = -1; boxin.focus ();} // blur () Metode btn2.onClick = function () {boxin.blur ();} // event focusin if (boxin.addeventlistener) {boxin.addeventlistener ('focusin', handler)} else {boxin.onfocusin = {handler) {boxin.onfocusin = {handler) {boxin.onfocusin = {handler) {boxin.onfocusin = {handler) {boxin. = 'LightBlue';} if (box.addeventListener) {box.addeventListener ('focusIn', handler)} else {box.onfocusin = handler;} // function peristiwa fnblur () {this.style.backgroundcolor = 'oranye';} box; Dari hasil berjalan, kita dapat melihat bahwa acara focusin dapat menggelembung; sementara acara blur tidak bisa menggelembung.
Acara fokus sering digunakan untuk tampilan dan verifikasi formulir
Misalnya, ketika Anda mendapatkan fokus, memodifikasi warna latar belakang; Saat Anda kehilangan fokus, kembalikan warna latar belakang dan verifikasi.
<div id = "box"> <input id = "input1" type = "text" placeholder = "hanya masukkan angka"> <input id = "input2" type = "text" placeholder = "hanya masukkan karakter Cina"> <span id = "Tips"> </span> </div> <script> if (box.addeventener) oPs) oP.AD (box.addeventener) {box. box.addeventListener ('focusout', fnout);} else {box.onfocusin = fnin; box.onfocusout = fnout;} function fnin (e) {e = e || peristiwa; var target = e.target || E.Srcelement; target.style.backgroundColor = 'lightgreen';} function fnout (e) {e = e || peristiwa; var target = e.target || E.Srcelement; target.style.backgroundColor = 'initial'; // Jika itu adalah kotak teks yang memverifikasi angka jika (target === input1) {if (!/^/D*$/. Test (target.value.trim ())) {target.focus (); tips.innerHtml = 'hanya masukkan angka, silakan masukkan kembali' setTimeout (function () {tips.innerHtml = ''}, 500); }} // Jika itu adalah kotak teks yang memverifikasi karakter Cina jika (target === input2) {if (!/^[/U4e00-/u9fa5]*$/. Test (target.value.trim ())) {target.focus (); tips.innerHtml = 'hanya masukkan karakter Cina, silakan masukkan kembali' setTimeout (function () {tips.innerHtml = ''}, 500); }}}} </script>Meringkaskan
Di atas adalah meringkas semua konten manajemen fokus di JavaScript untuk Anda. Artikel ini diperkenalkan secara rinci dan memiliki nilai referensi tertentu untuk studi dan pekerjaan Anda. Jika Anda memiliki pertanyaan, Anda dapat meninggalkan pesan untuk berkomunikasi.