當前位置：首頁 > 網頁制作 > HTML/Xhtml > 詳細頁面

詳解HTML onfocus獲得焦點和onblur失去焦點事件

時間：2019-12-05來源：系統城作者：電腦系統城

HTML onfocus 事件屬性

定義和用法

onfocus 屬性在元素獲得焦點時觸發。

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

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

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

實例

當輸入字段獲得焦點時觸發函數。此函數改變輸入字段的背景色

<script>
function setStyle(x)
{
document.getElementById(x).style.background="yellow";
}
</script>
</head>
<body>
<p>當輸入字段獲得焦點時觸發函數。此函數改變輸入字段的背景色。</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 屬性在元素失去焦點時觸發。

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

實例

當用戶離開輸入字段時對其進行驗證：

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持我們。

相關信息

2021-04-22
巧用 -webkit-box-reflect 倒影實現各類動效(小結)
2021-04-22
HTML+CSS+JS實現圖片的瀑布流布局的示例代碼
2020-03-04
HTML5 video自定義視頻播放器

HTML5之audio屬性
audio主要支持的音頻格式：mp3 ogg wav<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>audio</title></head><body>  <a...

2020-03-04
HTML連載72-動畫效果及其他屬性
一、動畫效果 1.過渡與動畫相類似，都需要三要素，那么他們的區別在哪里呢？ ?答：過渡必須是人為的觸發才會執行動畫，動畫不需要人為的觸發就可以自動執行?動畫。 2.?相同點：（1）過度和動畫都是用來給元素添加動畫的；（2）過渡...

2020-03-04

熱門系統總排行

裝機必備

系統教程欄目

欄目熱門教程

人氣教程排行

站長推薦

熱門系統下載

jlzzjlzz亚洲乱熟在线播放