首頁  >  文章  >  web前端  >  html中的onfocus和onblur是什麼屬性?怎麼使用?

html中的onfocus和onblur是什麼屬性?怎麼使用?

青灯夜游
青灯夜游原創
2018-10-30 16:42:0223460瀏覽

html中的onfocus和onblur是什麼屬性?怎麼使用?這篇文章就跟大家介紹onfocus屬性和onblur屬性是什麼,讓大家了解onfocus屬性和onblur屬性的簡單用法。有一定的參考價值,有需要的朋友可以參考一下,希望對你們有幫助。

首先我們要知道onfocus和onblur都是html的事件屬性,接下來簡單介紹一下這兩個屬性。

1、onfocus事件屬性

onfocus 屬性在元素獲得焦點時被觸發,即:獲得焦點事件;常用於

註:onfocus 屬性不適合用於以下元素使用:
、、、

2、onblur事件屬性

onblur 屬性在元素失去焦點時觸發,即:失去焦點事件;常用於表單驗證程式碼(例如使用者離開表單欄位)中。

說明:

1、onfocus 屬性與 onblur 屬性是相反的。

2、所有主流瀏覽器都支援 onfocus 屬性和 onblur 屬性。

下面我們透過簡單的程式碼範例來介紹onfocus 屬性和 onblur 屬性的用法。

html onfocus 事件屬性的用法

程式碼範例:當輸入欄位獲得焦點時觸發函數。此函數會改變輸入欄位的背景色(黃色)

<script>
function setStyle(x){
   document.getElementById(x).style.background="yellow";
}
</script>

<div>
   <p>当输入字段获得焦点时触发函数。此函数改变输入字段的背景色。</p>
   用户名: <input type="text" id="fname" onfocus="setStyle(this.id)"><br>
   密   码: <input type="password" id="lname" onfocus="setStyle(this.id)">
</div>

效果圖:

html中的onfocus和onblur是什麼屬性?怎麼使用?

#html onblur 事件屬性的用法

程式碼範例:當使用者離開輸入欄位時對其進行驗證:小寫字母轉大寫

<script>
function upperCase(){
   var x=document.getElementById("fname").value
   document.getElementById("fname").value=x.toUpperCase()
}
</script>
<div>
	<p>请输入您的姓名,然后把焦点移动到字段外:</p>
        用户名(英文字符):<input type="text" name="fname" id="fname" onblur="upperCase()">
</div>

效果圖:

html中的onfocus和onblur是什麼屬性?怎麼使用?

##總結:以上就是本篇文章所介紹的html onfocus和onblur事件屬性的全部內容,大家可以自己動手編譯試試,加深理解,希望能對大家的學習有所幫助。

以上是html中的onfocus和onblur是什麼屬性?怎麼使用?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn