最新的Web開發教程
 

onfocus事件

<事件對象

例

執行一個JavaScript當輸入域獲得焦點：

<input type="text" onfocus="myFunction()">
試一試»

更多"Try it Yourself"下面的例子。

定義和用法

當一個元素獲得焦點發生onfocus事件。

onfocus事件最常與<輸入>，<選擇>，和使用<a> 。

Tip: onfocus事件是相反的onblur事件。

提示：onfocus事件類似於onfocusin事件。 的主要區別在於，onfocus事件不起泡。 因此，如果你想找出一個元素或者其子是否獲得焦點時，您可以使用onfocusin事件。 但是，您可以使用的可選參數將useCapture實現這一目標addEventListener()用於onfocus事件的方法。

瀏覽器支持

事件
onfocus 是 是 是 是 是

句法

在HTML：

< 試一試»

在JavaScript：

object .onfocus=function(){ 試一試»

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

object .addEventListener("focus", myScript );
試一試»

注意： addEventListener()在Internet Explorer 8和更早版本不支持的方法。

技術細節

泡沫： 沒有
取消： 沒有
事件類型： FocusEvent
支持的HTML標籤： 所有的HTML元素，除了：<基數>，<BDO>，點擊<HEAD>，<HTML>，<IFRAME>，<META>，<param>的<SCRIPT>，<STYLE>和<title>
DOM版本： 2級事件
例子

更多示例

例

使用"onfocus"連同"onblur"事件：

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

例

事件代表團：設置的參數將useCapture addEventListener()為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>
試一試»

例

事件代表團：使用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>
試一試»
<事件對象