Acara fokus
Contoh
Jalankan JavaScript saat bidang input mendapat fokus:
<input type="text"
onfocus="myFunction()">
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Acara onfocus terjadi ketika elemen mendapat fokus.
Acara onfocus paling sering digunakan dengan <input>, <select>, dan <a>.
Tip: Acara onfocus adalah kebalikan dari acara onblur .
Tip: Acara onfocus mirip dengan acara onfocusin . Perbedaan utama adalah bahwa acara onfocus tidak menggelembung. Oleh karena itu, jika Anda ingin mengetahui apakah suatu elemen atau anaknya mendapatkan fokus, Anda bisa menggunakan event onfocusin. Namun, Anda bisa mencapai ini dengan menggunakan parameter useCapture opsional dari metode addEventListener() untuk acara onfocus.
Dukungan Peramban
| Event | |||||
|---|---|---|---|---|---|
| onfocus | Yes | Yes | Yes | Yes | Yes |
Sintaksis
Dalam HTML:
<element onfocus="myScript">
Dalam JavaScript:
object.onfocus = function(){myScript};
Dalam JavaScript, menggunakan metode addEventListener() :
object.addEventListener("focus", 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 "onfocus" bersama dengan acara "onblur":
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
Contoh
Kosongkan bidang input pada fokus:
<!-- When the input field gets focus, replace its current value with an
empty string -->
<input type="text" onfocus="this.value=''" value="Blabla">
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>