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

1、onfocus事件屬性

onfocus 屬性在元素獲得焦點時被觸發，即：獲得焦點事件；常用于 input 、 select 以及 a 標簽中。

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

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  密 nbsp; nbsp; nbsp;碼: 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是什么屬性？怎么使用？的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。