onBlur:當輸入框失去焦點后
onFocus:當輸入框獲得焦點后
這兩個JavaScript事件是寫在html標簽中的例如:
<input type="text" onBlur=" " onFocus=" " />
使用jQuery的實現方法為:
對於元素的焦點事件,我們可以使用jQuery的焦點函數focus(),blur()。
focus():得到焦點時使用,blur():失去焦點時使用。
代碼如下:
$("input").focus(); 或$("input").focus(function(){這里是獲取焦點時的事件})
$("input").blur(); 或$("input").blur(function(){這里是失去焦點時的事件})
同樣可以使用jQuery中提供的:focus偽類來判定元素是否獲取焦點;
// Get the focused element: var $focused = $(':focus'); // No jQuery: var focused = document.activeElement; // Does the element have focus: var hasFocus = $('input').is(':focus'); // No jQuery: elem === elem.ownerDocument.activeElement;
下面寫一個實例:
<!DOCTYPE HTML> <HTML> <HEAD> <TITLE> New Document </TITLE> </HEAD> <style> .bor{ border:3px solid red; } </style> <BODY> <input type="text"/> <script type="text/javascript" src="jquery-1.11.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input").focus(function(){ $(this).addClass("bor"); }); $("input").blur(function(){ $(this).removeClass("bor"); }); }); </script> </BODY> </HTML>
當然還可以根據獲取元素的狀態修改其他元素的各項屬性,或者是需要發生的事件