Acara onblur
Contoh
Jalankan JavaScript ketika pengguna meninggalkan bidang input:
<input type="text" onblur="myFunction()">
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Peristiwa onblur terjadi ketika suatu objek kehilangan fokus.
Acara onblur paling sering digunakan dengan kode validasi formulir (misalnya ketika pengguna meninggalkan bidang formulir).
Tip: Acara onblur adalah kebalikan dari acara onfocus .
Tip: Acara onblur mirip dengan acara onfocusout . Perbedaan utama adalah bahwa acara onblur tidak menggelembung. Oleh karena itu, jika Anda ingin mengetahui apakah suatu elemen atau anaknya kehilangan fokus, Anda dapat menggunakan acara onfocusout. Namun, Anda dapat mencapainya dengan menggunakan parameter useCapture opsional dari metode addEventListener() untuk peristiwa onblur.
Dukungan Peramban
Event | |||||
---|---|---|---|---|---|
onblur | Yes | Yes | Yes | Yes | Yes |
Sintaksis
Dalam HTML:
<element onblur="myScript">
Dalam JavaScript:
object.onblur = function(){myScript};
Dalam JavaScript, menggunakan metode addEventListener() :
object.addEventListener("blur", myScript);
Catatan: Metode addEventListener() tidak didukung di Internet Explorer 8 dan versi yang lebih lama.
Detail Teknis
Gelembung: | Tidak |
---|---|
Dapat dibatalkan: | Tidak |
Jenis acara: | Acara Fokus |
Tag HTML yang didukung: | SEMUA elemen HTML, KECUALI: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, dan <title> |
Versi DOM: | Acara Tingkat 2 |
Lebih Banyak Contoh
Contoh
Menggunakan "onblur" bersama dengan acara "onfocus":
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
Contoh
Delegasi acara: menyetel 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>
Contoh
Delegasi acara: menggunakan acara 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>