onfocusin Acara
Contoh
Jalankan JavaScript saat bidang input akan mendapatkan fokus:
<input type="text"
onfocusin="myFunction()">
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Acara onfocusin terjadi ketika sebuah elemen akan mendapatkan fokus.
Tip: Acara onfocusin mirip dengan acara onfocus . Perbedaan utama adalah bahwa acara onfocus tidak menggelembung. Oleh karena itu, jika Anda ingin mengetahui apakah suatu elemen atau anaknya mendapatkan fokus, Anda harus menggunakan acara onfocusin.
Tip: Acara onfocusin adalah kebalikan dari acara onfocusout .
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung acara tersebut.
| Event | |||||
|---|---|---|---|---|---|
| onfocusin | Yes | Yes | 52.0 | Yes | Yes |
Catatan: Acara onfocusin mungkin tidak berfungsi seperti yang diharapkan di Chrome, Safari, dan Opera 15+ menggunakan sintaks DOM HTML JavaScript. Namun, itu harus berfungsi sebagai atribut HTML dan dengan menggunakan metode addEventListener() (Lihat contoh sintaks di bawah).
Sintaksis
Dalam HTML:
<element onfocusin="myScript">
Di JavaScript (mungkin tidak berfungsi seperti yang diharapkan di Chrome, Safari, dan Opera 15+):
object.onfocusin = function(){myScript};
Dalam JavaScript, menggunakan metode addEventListener() :
object.addEventListener("focusin", myScript);
Catatan: Metode addEventListener() tidak didukung di Internet Explorer 8 dan versi yang lebih lama.
Detail Teknis
| Gelembung: | Ya |
|---|---|
| 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 "onfocusin" bersama dengan acara "onfocusout":
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
Contoh
Delegasi acara: menyetel parameter useCapture dari addEventListener() menjadi true (untuk fokus 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>
Contoh
Delegasi acara: menggunakan fokus dalam acara:
<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>