peristiwa onfocus

Peristiwa DOM Peristiwa FocusEvent

Definisi dan penggunaan

peristiwa onfocus terjadi saat elemen mendapatkan fokus.

peristiwa onfocus paling sering digunakan bersamaan dengan <input>, <select>, dan <a>.

Petunjuk: peristiwa onfocus seperti Peristiwa onblursebaliknya.

Petunjuk: peristiwa onfocus seperti Peristiwa onfocusinDiferensial utama adalah peristiwa onfocus tidak akan bubuh. Jadi, jika Anda ingin menentukan apakah elemen atau anak elemennya mendapatkan fokus, gunakan peristiwa onfocusin. Tetapi, Anda dapat menggunakan peristiwa onfocus untuk metoden addEventListener()dari useCapture Parameter untuk mencapai hal ini.

Contoh

Contoh 1

Eksekusi JavaScript saat bidang input mendapatkan fokus:

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

Coba Sendiri

Ada lagi contoh TIY di bawah halaman.

Sintaks

Pada HTML:

<elemen onfocus="myScript">

Coba Sendiri

Pada JavaScript:

objek.onfocus = function(){myScript};

Coba Sendiri

Pada JavaScript, gunakan metoden addEventListener():

objek.addEventListener("focus", myScript);

Coba Sendiri

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

技术细节

冒泡： 不支持
可取消： 不支持
事件类型： Peristiwa FocusEvent
支持的 HTML 标签： 所有 HTML 元素，除了：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> 以及 <title>
DOM 版本： Level 2 Events

浏览器支持

事件 Chrome IE Firefox Safari Opera
onfocus 支持 支持 支持 支持 支持

更多实例

例子 2

将 "onfocus" 与 "onblur" 事件一起使用：

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

Coba Sendiri

例子 3

清空获得焦点的输入字段：

<!-- 当输入字段获得焦点时，将其当前值替换为空字符串 -->
<input type="text" onfocus="this.value=''" value="Blabla">

Coba Sendiri

例子 4

事件委托：将 addEventListener() 的 useCapture 参数设置为 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

例子 5

事件委托：使用 focusin 事件（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>

Coba Sendiri

Peristiwa DOM Peristiwa FocusEvent