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 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是什麼屬性?怎麼使用?的詳細內容。更多資訊請關注PHP中文網其他相關文章!