tutorial pengembangan web terbaru
 

onfocus Acara

<Object Acara

Contoh

Mengeksekusi JavaScript ketika sebuah field input mendapat fokus:

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

Lebih "Try it Yourself" contoh di bawah ini.

Definisi dan Penggunaan

Acara onfocus terjadi ketika unsur mendapat fokus.

Acara onfocus paling sering digunakan dengan <input>, <pilih>, dan <a> .

Tip: Acara onfocus adalah kebalikan dari onblur acara.

Tip: Acara onfocus mirip dengan onfocusin acara. Perbedaan utama adalah bahwa acara onfocus tidak gelembung. Oleh karena itu, jika Anda ingin mengetahui apakah elemen atau anak yang mendapat fokus, Anda bisa menggunakan event onfocusin. Namun, Anda dapat mencapai ini dengan menggunakan useCapture parameter opsional dari addEventListener() metode untuk acara onfocus.

Dukungan Browser

Peristiwa
onfocus iya nih iya nih iya nih iya nih iya nih

Sintaksis

Dalam HTML:

< Cobalah sendiri "

Dalam JavaScript:

object .onfocus=function(){ Cobalah sendiri "

Dalam JavaScript, menggunakan addEventListener() metode:

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

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

Rincian teknis

Gelembung: Tidak
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 "onfocus" bersama-sama dengan "onblur" acara:

<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
Cobalah sendiri "

Contoh

Delegasi acara: pengaturan parameter useCapture dari addEventListener() ke benar:

<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