tutorial pengembangan web terbaru
 

Acara onfocusin

<Object Acara

Contoh

Mengeksekusi JavaScript ketika sebuah field input adalah untuk mendapatkan fokus:

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

Lebih "Try it Yourself" contoh di bawah ini.

Definisi dan Penggunaan

Acara onfocusin terjadi ketika unsur adalah untuk mendapatkan fokus.

Tip: Acara onfocusin mirip dengan onfocus acara. Perbedaan utama adalah bahwa acara onfocus tidak gelembung. Oleh karena itu, jika Anda ingin mengetahui apakah elemen atau anak yang mendapat fokus, Anda harus menggunakan acara onfocusin.

Tip: Meskipun Firefox tidak mendukung acara onfocusin, Anda dapat mengetahui apakah seorang anak dari elemen mendapat fokus atau tidak, dengan menggunakan pendengar menangkap untuk onfocus acara (menggunakan useCapture parameter opsional dari addEventListener() metode).

Tip: Acara onfocusin adalah kebalikan dari onfocusout acara.

Dukungan Browser

Peristiwa
onfocusin iya nih iya nih Tidak didukung iya nih iya nih

Catatan: Acara onfocusin mungkin tidak bekerja seperti yang diharapkan di Chrome, Safari dan Opera 15 + menggunakan sintaks JavaScript HTML DOM. Namun, harus bekerja sebagai atribut HTML dan dengan menggunakan addEventListener() metode.

Sintaksis

Dalam HTML:

< Cobalah sendiri "

Dalam JavaScript (may not work as expected in Chrome, Safari and Opera 15+) :

object .onfocusin=function(){ Cobalah sendiri "

Dalam JavaScript, menggunakan addEventListener() metode:

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

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

Rincian teknis

Gelembung: iya nih
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 "onfocusin" bersama-sama dengan "onfocusout" acara:

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

Contoh

Delegasi acara: pengaturan parameter useCapture dari addEventListener() ke benar (for focus and 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>
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