Peristiwa onfocusout

Event DOM FocusEvent

Definisi dan penggunaan

Peristiwa onfocusout terjadi saat elemen hampir kehilangan fokus.

Walaupun Firefox tidak mendukung peristiwa onfocusout, Anda dapat memahami apakah elemen anak kehilangan fokus dengan menggunakan penjilid pengambilan peristiwa onblur (gunakan parameter opsi useCapture metode addEventListener()) Peristiwa onfocusout mirip dengan Event onblurPerbedaan utama adalah peristiwa onblur tidak memunculkan. Jadi, jika Anda ingin menemukan apakah elemen atau anaknya kehilangan fokus, maka gunakan peristiwa onfocusout.

Walaupun Firefox tidak mendukung peristiwa onfocusout, Anda dapat memahami apakah elemen anak kehilangan fokus dengan menggunakan penjilid pengambilan peristiwa onblur (gunakan parameter opsi useCapture metode addEventListener()).

Walaupun Firefox tidak mendukung peristiwa onfocusout, Anda dapat memahami apakah elemen anak kehilangan fokus dengan menggunakan penjilid pengambilan peristiwa onblur (gunakan parameter opsi useCapture metode addEventListener()) Petunjuk: Event onfocusinPeristiwa onfocusout

Sebaliknya.

Contoh

Contoh 1

Eksekusi JavaScript saat bidang input hampir kehilangan fokus:

Coba Sendiri

<input type="text" onfocusout="myFunction()">

Di bawah halaman ini ada banyak contoh TIY lainnya.

Sintaksis

Pada HTML:< element.addEventListener("focusout",onfocusout="

Coba Sendiri

">

Pada JavaScript, gunakan metode addEventListener():Pada JavaScript (mungkin tidak bekerja seperti diharapkan di Chrome, Safari dan Opera 15+):.addEventListener("focusout",.onfocusout = function(){

Coba Sendiri

};

Pada JavaScript, gunakan metode addEventListener():object .addEventListener("focusout",myScript

Coba Sendiri

Keterangan:); Internet Explorer 8 atau versi yang lebih awal tidak mendukungMetode addEventListener()

.

Detil teknis: Dukungan
Pembubukan: Dapat dibatalkan:
Tidak didukung: FocusEvent
Tanda tangan HTML yang didukung: Seluruh elemen HTML kecuali: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> serta <title>
Versi DOM: Level 2 Events

Dukungan browser

Angka di tabel menunjukkan versi browser pertama yang mendukung peristiwa ini penuh.

Peristiwa Chrome IE Firefox Safari Opera
onfocusout Dukungan Dukungan 52.0 Dukungan Dukungan

Keterangan:Keterangan: onfocusout peristiwa mungkin tidak bekerja seperti diharapkan di Chrome, Safari, dan Opera 15+. Namun, hal ini seharusnya digunakan sebagai atribut HTML dan menggunakan metode addEventListener() (lihat contoh sintaks di bawah).

Beberapa contoh lain

Contoh 2

Gunakan peristiwa onfocusin dan onfocusout bersamaan:

<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">

Coba Sendiri

Contoh 3

Perwakilan peristiwa: atur parameter useCapture dari addEventListener() menjadi true (digunakan untuk focus dan blur):

<form id="myForm">
  <input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focus", myFocusFunction, true);
x.addEventListener("blur", myBlurFunction, true);
function myFocusFunction() {
  document.getElementById("myInput").style.backgroundColor = "yellow"; 
}
function myBlurFunction() {
  document.getElementById("myInput").style.backgroundColor = ""; 
}
</script>

Coba Sendiri

Contoh 4

Perwakilan peristiwa: menggunakan peristiwa focusin:

<form id="myForm">
  <input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focusin", myFocusFunction);
x.addEventListener("focusout", myBlurFunction);
function myFocusFunction() {
  document.getElementById("myInput").style.backgroundColor = "yellow"; 
}
function myBlurFunction() {
  document.getElementById("myInput").style.backgroundColor = ""; 
}
</script>

Coba Sendiri

Event DOM FocusEvent