Peristiwa onblur

Event DOM Event FocusEvent

Definisi dan Penggunaan

Peristiwa onblur terjadi saat objek kehilangan fokus.

Peristiwa onblur paling sering digunakan bersamaan dengan kode verifikasi formulir (contohnya, saat pengguna meninggalkan area input formulir).

Pernyataan: Peristiwa onblur seperti Event onfocussebaliknya.

Pernyataan: Peristiwa onblur mirip dengan Event onfocusout。Perbedaan utama adalah peristiwa onblur tidak akan kabur. Jadi, jika Anda ingin mengecek apakah elemen atau anak elemennya kehilangan fokus, Anda dapat menggunakan peristiwa onfocusout. Namun, Anda dapat menggunakan peristiwa onblur untuk Metode addEventListener()parameter useCapture (opsional) untuk mencapai hal ini.

Contoh

Eksekusi JavaScript saat pengguna meninggalkan area input:

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

Coba Sendiri

Ada banyak contoh TIY lainnya di bawah halaman.

Sintaksis

Pada HTML:

<element onblur="myScript">

Coba Sendiri

Pada JavaScript:

objek.onblur = function(){}myScript};

Coba Sendiri

Pada JavaScript, gunakan metode addEventListener():

objek.addEventListener("blur", myScript);

Coba Sendiri

Keterangan:Internet Explorer 8 atau versi yang lebih awal tidak mendukung Metode addEventListener().

Detil Teknologi

Bubbling: Tidak Dukung
Dapat Dibatalkan: Tidak Dukung
Tipe Peristiwa: Event FocusEvent
Tanda HTML yang Dukung: Semua elemen HTML kecuali: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> dan <title>
Versi DOM: Level 2 Events

Dukungan Browser

Peristiwa Chrome IE Firefox Safari Opera
onblur Dukung Dukung Dukung Dukung Dukung

Contoh Lebih Banyak

Contoh

Gunakan "onblur" dan "onfocus" peristiwa bersamaan:

<input type="text" onfocus="focusFunction()" onblur="blurFunction()">

Coba Sendiri

Contoh

Perwalian: atur parameter useCapture dari addEventListener() menjadi true:

<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

Perwalian: menggunakan peristiwa focusin (Firefox tidak mendukung):

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