Peristiwa onfocusin

Event DOM Event FocusEvent

Definisi dan penggunaan

Peristiwa onfocusin terjadi saat elemen mendekati mendapatkan focus.

Petunjuk:Peristiwa onfocusin mirip dengan: Peristiwa onfocus.

Petunjuk:Walaupun Firefox tidak mendukung peristiwa onfocusin, Anda dapat menentukan apakah elemen anak mendapatkan focus melalui pengejar penangkapan peristiwa onfocus (gunakan parameter opsi useCapture metode addEventListener()). Perbedaan utama adalah peristiwa onfocus tidak akan kabur. Jadi, jika Anda ingin mengetahui apakah elemen atau anaknya mendapatkan focus, Anda harus menggunakan peristiwa onfocusin.

Petunjuk:Peristiwa onfocusin dengan: Peristiwa onfocusoutSebaliknya.

Instansi

Contoh 1

Eksekusi JavaScript saat input field mendekati mendapatkan focus:

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

Coba Sendiri

Ada lebih banyak contoh TIY di bawah halaman.

Sintaksis

Pada HTML:

<elemen onfocusin="myScript">

Coba Sendiri

Pada JavaScript (dalam Chrome, Safari, dan Opera 15+ mungkin tidak berfungsi dengan baik):

objek.onfocusin = function(){myScript};

Coba Sendiri

Pada JavaScript, gunakan metode addEventListener():

objek.addEventListener("focusin", myScript);

Coba Sendiri

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

Detil teknis

Tercabut: Dukungan
Tercabut: Dapat dibatalkan:
Tidak didukung: Event FocusEvent
Tanda tangan HTML yang didukung: Seluruh elemen HTML kecuali: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> serta <title>
Versi DOM: Level 2 Events

Dukungan browser

Angka di tabel menunjukkan versi browser pertama yang mendukung peristiwa ini penuh.

Peristiwa Chrome IE Firefox Safari Opera
onfocusin Dukungan Dukungan 52.0 Dukungan Dukungan

Keterangan:Keterangan: Pada browser Chrome, Safari, dan Opera 15+ event onfocusin mungkin tidak bekerja seperti diharapkan. Namun, hal ini harus digunakan sebagai atribut HTML dan digunakan dengan metode addEventListener() (lihat contoh sintaks di bawah).

Beberapa contoh lain

Contoh 2

Gunakan peristiwa "onfocusin" dan "onfocusout" bersamaan:

<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">

Coba Sendiri

Contoh 3

Perwakilan peristiwa: atur parameter useCapture addEventListener() menjadi true (digunakan untuk focus 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>

Coba Sendiri

Contoh 4

Perwakilan peristiwa: penggunaan peristiwa focusin:

<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