tutorial pengembangan web terbaru
 

Acara onblur

<Object Acara

Contoh

Mengeksekusi JavaScript ketika pengguna meninggalkan sebuah field input:

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

Lebih "Try it Yourself" contoh di bawah ini.

Definisi dan Penggunaan

Acara onblur terjadi ketika sebuah objek kehilangan fokus.

Acara onblur yang paling sering digunakan dengan kode validasi form (misalnya ketika pengguna meninggalkan lapangan form).

Tip: Acara onblur adalah kebalikan dari onfocus acara.

Tip: Acara onblur mirip dengan onfocusout acara. Perbedaan utama adalah bahwa acara onblur tidak gelembung. Oleh karena itu, jika Anda ingin mengetahui apakah elemen atau anaknya kehilangan fokus, Anda bisa menggunakan event onfocusout. Namun, Anda dapat mencapai ini dengan menggunakan useCapture parameter opsional dari addEventListener() metode untuk acara onblur.

Dukungan Browser

Peristiwa
onblur iya nih iya nih iya nih iya nih iya nih

Sintaksis

Dalam HTML:

< Cobalah sendiri "

Dalam JavaScript:

object .onblur=function(){ Cobalah sendiri "

Dalam JavaScript, menggunakan addEventListener() metode:

object .addEventListener("blur", myScript );
Cobalah sendiri "

Catatan: addEventListener() metode tidak didukung di Internet Explorer 8 dan versi sebelumnya.

Rincian teknis

Gelembung: Tidak
dibatalkan: Tidak
jenis acara: FocusEvent
tag HTML yang didukung: SEMUA elemen HTML, KECUALI: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, dan <title>
DOM Versi: Level 2 Acara
contoh

Contoh lebih

Contoh

Menggunakan "onblur" bersama-sama dengan "onfocus" acara:

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

Contoh

Delegasi acara: pengaturan parameter useCapture dari addEventListener() ke benar:

<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>
Cobalah sendiri "

Contoh

Delegasi acara: menggunakan event focusin (tidak didukung oleh Firefox):

<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>
Cobalah sendiri "
<Object Acara