詳解HTML onfocus獲得焦點(diǎn)和onblur失去焦點(diǎn)事件

2024-08-26 00:13:54

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

HTML onfocus 事件屬性

定義和用法

onfocus 屬性在元素獲得焦點(diǎn)時(shí)觸發(fā)。

onfocus 常用于 <input>、<select> 以及 <a>.

提示：onfocus 屬性與 onblur 屬性相反。

注釋：onfocus 屬性不適用于以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。

實(shí)例

當(dāng)輸入字段獲得焦點(diǎn)時(shí)觸發(fā)函數(shù)。此函數(shù)改變輸入字段的背景色

<script>function setStyle(x){document.getElementById(x).style.background="yellow";}</script></head><body> <p>當(dāng)輸入字段獲得焦點(diǎn)時(shí)觸發(fā)函數(shù)。此函數(shù)改變輸入字段的背景色。</p> First name: <input type="text" id="fname" onfocus="setStyle(this.id)"><br>Last name: <input type="text" id="lname" onfocus="setStyle(this.id)"> </body>

HTML onblur 事件屬性

定義和用法

onblur 屬性在元素失去焦點(diǎn)時(shí)觸發(fā)。

onblur 常用于表單驗(yàn)證代碼（例如用戶離開表單字段）。

實(shí)例

當(dāng)用戶離開輸入字段時(shí)對(duì)其進(jìn)行驗(yàn)證：

<script>function upperCase(){var x=document.getElementById("fname").valuedocument.getElementById("fname").value=x.toUpperCase()}</script></head><body> <p>請輸入您的姓名，然后把焦點(diǎn)移動(dòng)到字段外：</p>請輸入您的姓名（英文字符）：<input type="text" name="fname" id="fname" onblur="upperCase()"> </body>