onfocusin na kaganapan

DOM Event FocusEvent

Paglilinaw at paggamit:

Ang onfocusin na kaganapan ay nangyayari kapag ang elemento ay nakaabout na makuha ng fokus.

Kahit na ang Firefox ay hindi suporta sa onfocusin na kaganapan, maaari kang magkaroon ng pagkakitaan kung ang anak na elemento ng isang elemento ay nakakuha ng fokus sa pamamagitan ng paggamit ng kaganapan na pagpupunyag ng onfocus (sa pamamagitan ng opsyonal na parameter na useCapture ng addEventListener() na paraan).onfocusin na kaganapan ay katulad sa onfocus EventAng pangunahing pagkakaiba ay ang onfocus na kaganapan ay hindi bubong. Kaya't kung gusto mong malaman kung ang isang elemento o ang kanyang anak ay nakakuha ng fokus, dapat mong gamitin ang onfocusin na kaganapan.

Kahit na ang Firefox ay hindi suporta sa onfocusin na kaganapan, maaari kang magkaroon ng pagkakitaan kung ang anak na elemento ng isang elemento ay nakakuha ng fokus sa pamamagitan ng paggamit ng kaganapan na pagpupunyag ng onfocus (sa pamamagitan ng opsyonal na parameter na useCapture ng addEventListener() na paraan)..

Kahit na ang Firefox ay hindi suporta sa onfocusin na kaganapan, maaari kang magkaroon ng pagkakitaan kung ang anak na elemento ng isang elemento ay nakakuha ng fokus sa pamamagitan ng paggamit ng kaganapan na pagpupunyag ng onfocus (sa pamamagitan ng opsyonal na parameter na useCapture ng addEventListener() na paraan).Mga tagubilin: onfocusout Eventonfocusin na kaganapan at

Kabaligtaran.

Halimbawa

Halimbawa 1

Ang gumaganap ng JavaScript kapag ang lapit na makuha ang teksto field:

Try It Yourself

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

Mayroon pang mga halimbawa sa ibaba ng pahina.

Gramata:

Sa HTML:< element.addEventListener("focusin",onfocusin="

Try It Yourself

">

Sa JavaScript, gamit ang addEventListener() na paraan:Sa JavaScript (maaring hindi gumana sa Chrome, Safari at Opera 15+):.addEventListener("focusin",.onfocusin = function(){

Try It Yourself

};

Sa JavaScript, gamit ang addEventListener() na paraan:object .addEventListener("focusin",myScript

Try It Yourself

注释：); Internet Explorer 8 o mas maaga na bersyon ay hindi suporta:addEventListener() na paraan:

.

Mga teknikal na detalye: 支持
Pumaputok: Maaaring kanselahin:
Hindi suportado: FocusEvent
Tag na suportado sa HTML: Lahat ng HTML na elemento, maliban sa: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> at <title>
DOM 版本： Level 2 Events

浏览器支持

表中的数字注明了完全支持该事件的首个浏览器版本。

事件 Chrome IE Firefox Safari Opera
onfocusin 支持 支持 52.0 支持 支持

注释：onfocusin 事件在使用 JavaScript HTML DOM 语法的 Chrome、Safari 和 Opera 15+ 中可能无法按预期工作。但是，它应该作为 HTML 属性并使用 addEventListener() 方法（请参见下面的语法示例）。

更多实例

例子 2

将 "onfocusin" 与 "onfocusout" 事件一起使用：

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

Try It Yourself

例子 3

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

Try It Yourself

例子 4

事件委托：使用 focusin 事件：

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

Try It Yourself

DOM Event FocusEvent