Peristiwa onfocus

Event DOM Event FocusEvent

Definisi dan penggunaan

Peristiwa onfocus terjadi saat elemen mendapatkan fokus.

Peristiwa onfocus sering digunakan bersama dengan <input>, <select>, dan <a>.

Petunjuk: Peristiwa onfocus sama seperti Event onblursebaliknya.

Petunjuk: Peristiwa onfocus mirip dengan Event onfocusinDiferensial utama adalah peristiwa onfocus tidak akan diflukses. Jadi, jika Anda ingin menentukan apakah elemen atau anak elemennya mendapatkan fokus, Anda dapat menggunakan peristiwa onfocusin. Namun, Anda dapat menggunakan peristiwa onfocus untuk Metode addEventListener()dari useCapture Parameter untuk mencapai hal ini.

Contoh

Contoh 1

Eksekusi JavaScript saat input field mendapatkan fokus:

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

Coba Sendiri

Ada banyak contoh TIY lainnya di bawah halaman.

Sintaksis

Pada HTML:

<elemen onfocus="myScript">

Coba Sendiri

Pada JavaScript:

objek.onfocus = function(){myScript};

Coba Sendiri

Pada JavaScript, gunakan metode addEventListener():

objek.addEventListener("focus", myScript);

Coba Sendiri

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

Detil teknis

Pembubaran: Tidak didukung
Dapat dibatalkan: Tidak didukung
Tipe peristiwa: Event FocusEvent
Tanda HTML yang didukung: Semua elemen HTML kecuali: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> dan <title>
Versi DOM: Level 2 Events

Dukungan browser

Peristiwa Chrome IE Firefox Safari Opera
onfocus Dukung Dukung Dukung Dukung Dukung

Beberapa contoh lain

Contoh 2

Gunakan peristiwa onfocus dan onblur:

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

Coba Sendiri

Contoh 3

Bersihkan bidang input yang mendapatkan fokus:

<!-- Saat bidang input mendapatkan fokus, mengganti nilai saat ini dengan string kosong -->
<input type="text" onfocus="this.value=''" value="Blabla">

Coba Sendiri

Contoh 4

Pengiriman Event: Menetapkan parameter useCapture dari addEventListener() ke 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>

Coba Sendiri

Contoh 5

Pengiriman Event: Menggunakan peristiwa focusin (Firefox tidak mendukung):

<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