Matukio ya onfocus

Matukio ya DOM FocusEvent

Mifano na Matumizi

Matukio ya onfocus inatendeka kwenye eneo linapokea ujauzito wa kusoma.

Matukio ya onfocus inatumika kwa kawaida na <input>, <select> na <a>.

Mafanikio: Matukio ya onfocus na Matukio ya onblurThabiti.

Mafanikio: Matukio ya onfocus ni kama Matukio ya onfocusin. Kinajaliwa kwamba matukio ya onfocus haionekani kwenye mifumo yaliyopita. Kwa hiyo, kama unataka kubadilisha elementi au kiumbea chake linapokea ujauzito wa kusoma, unaweza kutumia matukio ya onfocusin. Lakini, unaweza kutumia matukio ya onfocus kwa sababu ya kufikiria. Metodi ya kusoma kwa kuzingatia (addEventListener())kwa useCapture Mafanikio ya kumaliza hii.

Mfano

Mfano 1

Washughulikia JavaScript wakati eneo la input linapokea ujauzito wa kusoma:

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

Tafuta kufanya

Makundi ya TIY zaidi yanaonekana kwenye ukurasa huo.

Makadaro

Kwenye HTML:

<element onfocus="myScript">

Tafuta kufanya

Kwenye JavaScript:

object.onfocus = function(){myScript};

Tafuta kufanya

Kwenye JavaScript, tumia metodi ya addEventListener():

object.addEventListener("focus", myScript);

Tafuta kufanya

Madoa:Internet Explorer 8 na kuzingatia zaidi hazikufaa Metodi ya kusoma kwa kuzingatia (addEventListener())。

技术细节

冒泡： 不支持
可取消： 不支持
事件类型： 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()">

Tafuta kufanya

例子 3

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

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

Tafuta kufanya

例子 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>

Tafuta kufanya

例子 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>

Tafuta kufanya

Matukio ya DOM FocusEvent