首頁 > 文章 > web前端 > javascript怎麼判斷元素是否有焦點

javascript怎麼判斷元素是否有焦點

WBOY原創: 2022-03-10 12:11:343813瀏覽

在JavaScript中，可用onfocus()和onblur()事件判斷元素是否有焦點，onfocus事件在元素獲取焦點時發生，onblur事件在元素失去焦點時發生，語法為「」。

本教學操作環境：windows10系統、javascript1.8.5版、Dell G3電腦。

javascript怎麼判斷元素是否有焦點

onfocus 事件在物件獲得焦點時發生。

Onfocus 通常用於 ,

提示： onfocus 事件的相反事件為 onblur 事件。

語法

HTML 中:

<element onfocus="SomeJavaScriptCode">

JavaScript 中:

object.onfocus=function(){SomeJavaScriptCode}

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("focus", myScript);

onbluree

onblur事件會在物件失去焦點時發生。

Onblur 常用於Javascript驗證程式碼，一般用於表單輸入框。

提示：onblur 相反事件為 onfocus 事件。

語法

HTML 中:

<element onblur="SomeJavaScriptCode">

JavaScript 中:

object.onblur=function(){SomeJavaScriptCode};

範例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
function Function(){
document.getElementById(&#39;tip&#39;).innerHTML=&#39;元素失去焦点了&#39;;
}
function myFunction(x){
document.getElementById(&#39;tip&#39;).innerHTML=&#39;元素获取焦点了&#39;;
}
</script>
</head>
<body>
判断焦点示例: <input type="text" onfocus="myFunction(this)" onblur="Function()">
<p id="tip" style="color:red;"></p>
</body>
</html>

# 輸出結果：

javascript怎麼判斷元素是否有焦點

javascript怎麼判斷元素是否有焦點

javascript怎麼判斷元素是否有焦點

相關文章