快捷導(dǎo)航

jquery獲取焦點(diǎn)和失去焦點(diǎn)事件代碼

更新時(shí)間：2013年04月21日 17:08:05 作者：

鼠標(biāo)在搜索框中點(diǎn)擊的時(shí)候里面的文字就消失了，經(jīng)常會(huì)用到搜索框的獲得焦點(diǎn)和失去焦點(diǎn)的事件，接下來(lái)介紹一下具體代碼，感興趣的朋友額可以參考下

input失去焦點(diǎn)和獲得焦點(diǎn)
鼠標(biāo)在搜索框中點(diǎn)擊的時(shí)候里面的文字就消失了。
我們?cè)谧鼍W(wǎng)站的時(shí)候經(jīng)常會(huì)用到搜索框的獲得焦點(diǎn)和失去焦點(diǎn)的事件，因?yàn)閼?，每次都去寫非常的煩，于是就一勞永逸，遇到類似情況就來(lái)調(diào)用一下就OK 了

相關(guān)js代碼:

復(fù)制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>input失去焦點(diǎn)和獲得焦點(diǎn)jquery焦點(diǎn)事件插件 - 懶人建站</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); 
} 
}); 
}; 
/*下面是調(diào)用方法*/ 
$.focusblur("#searchkey"); 
}); 
</script> 
</head> 
<body> 
<form action="" method="post"> 
<input name="" type="text" value="輸入搜索關(guān)鍵詞" id="searchkey"/> 
<input name="" type="submit" id="searchbtn" value="搜索"/> 
</form> 
<p>input失去焦點(diǎn)和獲得焦點(diǎn)jquery焦點(diǎn)事件插件，<br/><strong style="color:#F00">鼠標(biāo)在搜索框中點(diǎn)擊的時(shí)候里面的文字就消失了</strong>。</p> 
</body> 
</html> 

jquery獲取和失去焦點(diǎn)事件

復(fù)制代碼代碼如下:

 
<script src="jquery-1.9.1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
$('#username').focus(function ()//得到教室時(shí)觸發(fā)的時(shí)間 
{ 
$('#username').val(''); 
}) 
$('#username').blur(function () 失去焦點(diǎn)時(shí)觸發(fā)的時(shí)間 
{ 
if ($('#username').val() == 'marry') { 
$('#q').text('用戶名已存在！') 
} 
else { $('#q').text('ok!') } 
}) 