jquery獲取焦點和失去焦點事件代碼


input失去焦點和獲得焦點 
鼠標在搜索框中點擊的時候里面的文字就消失了。 
我們在做網站的時候經常會用到搜索框的獲得焦點和失去焦點的事件,因為懶,每次都去寫非常的煩,於是就一勞永逸,遇到類似情況就來調用一下就OK 了 。

相關js代碼如下:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>input失去焦點和獲得焦點jquery焦點事件插件 - 懶人建站</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
//focusblur 
jQuery.focusblur = function(focusid) { 
var focusblurid = $(focusid); 
var defval = focusblurid.val(); 
focusblurid.focus(function(){ 
var thisval = $(this).val(); 
if(thisval==defval){ 
$(this).val(""); 
} 
}); 
focusblurid.blur(function(){ 
var thisval = $(this).val(); 
if(thisval==""){ 
$(this).val(defval); 
} 
}); 
}; 
/*下面是調用方法*/ 
$.focusblur("#searchkey"); 
}); 
</script> 
</head> 
<body> 
<form action="" method="post"> 
<input name="" type="text" value="輸入搜索關鍵詞" id="searchkey"/> 
<input name="" type="submit" id="searchbtn" value="搜索"/> 
</form> 
<p>input失去焦點和獲得焦點jquery焦點事件插件,<br/><strong style="color:#F00">鼠標在搜索框中點擊的時候里面的文字就消失了</strong>。</p> 
</body> 
</html> 

  jquery獲取和失去焦點事件 

<script src="jquery-1.9.1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
$('#username').focus(function ()//獲取焦點觸發的時間 
{ 
$('#username').val(''); 
}) 
$('#username').blur(function () 失去焦點時觸發的時間 
{ 
if ($('#username').val() == 'marry') { 
$('#q').text('用戶名已存在!') 
} 
else { $('#q').text('ok!') } 
}) 

  


免責聲明!

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



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