onfocusin 事件

DOM 事件 FocusEvent

定義和用法

onfocusin 事件在元素即將獲得焦點時發生。

提示：onfocusin 事件類似于 onfocus 事件。主要區別在于 onfocus 事件不會冒泡。因此，如果你想知道一個元素或其子元素是否獲得焦點，你應該使用 onfocusin 事件。

提示：雖然 Firefox 不支持 onfocusin 事件，但您可以通過使用 onfocus 事件的捕獲偵聽器（使用 addEventListener() 方法的可選 useCapture 參數）來確定元素的子元素是否獲得焦點。

提示：onfocusin 事件與 onfocusout 事件相反。

實例

例子 1

當輸入字段即將獲得焦點時執行 JavaScript：

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

親自試一試

頁面下方有更多 TIY 實例。

語法

在 HTML 中：

<element onfocusin="myScript">

親自試一試

在 JavaScript 中（在 Chrome、Safari 和 Opera 15+ 中可能無法正常工作）：

object.onfocusin = function(){myScript};

親自試一試

在 JavaScript 中，使用 addEventListener() 方法：

object.addEventListener("focusin", myScript);

親自試一試

注釋：Internet Explorer 8 或更早的版本不支持 addEventListener() 方法。

技術細節

冒泡： 支持
可取消： 不支持
事件類型： FocusEvent
支持的 HTML 標簽： 所有 HTML 元素，除了：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> 以及 <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()">

親自試一試

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

親自試一試

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

親自試一試

DOM 事件 FocusEvent