input輸入框獲得、失去焦點添加事件


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;
復制代碼

下面寫一個實例:

按 Ctrl+C 復制代碼

<!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>

按 Ctrl+C 復制代碼

當然還可以根據獲取元素的狀態修改其他元素的各項屬性,或者是需要發生的事件


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM