jQuery blur事件
一個元素失去焦點將觸發blur事件。
起初,這個事件僅適用於表單元素,如元素<input> 。
在最新的瀏覽器中,這個事件適用範圍已經擴大到包括所有元素型別。
一個元素可以通過鍵盤命令失去焦點,比如tab鍵,或用滑鼠點選網頁上的其他地方。
語法結構一:
[JavaScript] 純文字檢視 複製程式碼.blur(handler(eventObject))
引數解析:
(1).handler:事件處理函式;eventObject是傳遞給事件處理函式的時間物件。
jQuery1.0版本新增。
語法機構二:
[JavaScript] 純文字檢視 複製程式碼.blur([eventData ], handler(eventObject))
引數解析:
(1).eventData:可選,當一個事件被觸發時,要傳遞給event.data的資料。
(2).handler:事件處理函式;eventObject是傳遞給事件處理函式的時間物件。
jQuery1.4.3版本新增。
語法結構三:
[JavaScript] 純文字檢視 複製程式碼.blur()
引數解析:
如果沒有傳遞引數,那麼呼叫此方法會執行事件處理函式。
jQuery1.0版本新增。
程式碼例項:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script src="https://code.jquery.com/jquery-3.0.0.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input").blur(function(){ $(this).css("backgroundColor","green"); }) $("input").focus(function(){ $(this).css("backgroundColor","red"); }) }) </script> </head> <body> <div> <ul> <li>姓名:<input type="text" name="username"/></li> <li>密碼:<input type="password" name="pw" /></li> </ul> </div> </body> </html>
表單元素失去或者獲得焦點時重置它們的背景色。
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script src="https://code.jquery.com/jquery-3.0.0.js"></script> <script type="text/javascript"> $(document).ready(function () { var infor = { txt: "失去焦點" } $("input").blur(infor, function (ev) { $(this).css("backgroundColor", "green"); $(this).val(ev.data.txt); }) $("input").focus(function () { $(this).css("backgroundColor", "red"); $(this).val("螞蟻部落"); }) }) </script> </head> <body> <div> <ul> <li>姓名:<input type="text" name="username"/></li> <li>密碼:<input type="password" name="pw" /></li> </ul> </div> </body> </html>
相關文章
- JavaScript blur 事件JavaScript事件
- javascript blur事件JavaScript事件
- react 中的blur事件React事件
- focusout和blur事件的區別事件
- 影像模糊工具:Photo Blur FX - Image Blur for MacMac
- jquery事件jQuery事件
- jQuery 事件jQuery事件
- jQuery 事件方法jQuery事件
- jQuery 事件冒泡jQuery事件
- jQuery hover事件jQuery事件
- jQuery事件物件jQuery事件物件
- jQuery mousemove 事件jQuery事件
- jQuery mouseup事件jQuery事件
- jQuery mousedown事件jQuery事件
- jQuery mouseout 事件jQuery事件
- jQuery mouseover事件jQuery事件
- jQuery mouseenter事件jQuery事件
- jQuery dblclick事件jQuery事件
- jQuery click事件jQuery事件
- jQuery submit事件jQueryMIT事件
- jQuery change事件jQuery事件
- jQuery focusout事件jQuery事件
- jQuery focusin事件jQuery事件
- jQuery focus事件jQuery事件
- jQuery scroll事件jQuery事件
- jQuery resize事件jQuery事件
- jQuery error事件jQueryError事件
- jQuery----事件jQuery事件
- jQuery 事件(二) 表單事件jQuery事件
- 36. jQuery 事件jQuery事件
- jQuery事件監聽jQuery事件
- jQuery 事件委託jQuery事件
- jQuery contextmenu事件jQueryContext事件
- jQuery mouseleave事件jQuery事件
- jQuery keyup事件jQuery事件
- jQuery keypress事件jQuery事件
- jQuery keydown事件jQuery事件
- jQuery select事件jQuery事件