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

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

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

input失去焦點(diǎn)和獲得焦點(diǎn)
鼠標(biāo)在搜索框中點(diǎn)擊的時候里面的文字就消失了。
我們在做網(wǎng)站的時候經(jīng)常會用到搜索框的獲得焦點(diǎn)和失去焦點(diǎn)的事件，因?yàn)閼校看味既懛浅５臒?，于是就一勞永逸，遇到類似情況就來調(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)擊的時候里面的文字就消失了</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 ()//得到教室時觸發(fā)的時間 
{ 
$('#username').val(''); 
}) 
$('#username').blur(function () 失去焦點(diǎn)時觸發(fā)的時間 
{ 
if ($('#username').val() == 'marry') { 
$('#q').text('用戶名已存在！') 
} 
else { $('#q').text('ok!') } 
}) 

您可能感興趣的文章:

相關(guān)文章

讀jQuery之九一些瑕疵說明
jQuery1.6.1 發(fā)布有一段時間了，發(fā)現(xiàn)一些冗余代碼，列出如下
2011-06-06
網(wǎng)頁前端優(yōu)化之滾動延時加載圖片示例
做web開發(fā)的朋友都應(yīng)該掌握前端優(yōu)化這個技巧，其中一個就是滾動延時加載。這個技巧應(yīng)用在了很多地方，比如新浪微博網(wǎng)頁版。以下就為大家詳細(xì)介紹，需要的朋友可以參考下
2013-07-07
關(guān)于Jquery操作Cookie取值錯誤的解決方法
使用JQuery操作cookie時發(fā)生取的值不正確,結(jié)果發(fā)現(xiàn)cookie有四個不同的屬性，下面與大家分享下錯誤的原因及解決方法
2013-08-08
jQuery Ajax自定義分頁組件(jquery.loehpagerv1.0)實(shí)例詳解
這篇文章主要介紹了jQuery Ajax自定義分頁組件(jquery.loehpagerv1.0)實(shí)例詳解,需要的朋友可以參考下
2017-05-05
jquery實(shí)現(xiàn)圖片放大鏡效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)圖片放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-12-12
jQuery綁定事件的四種方式介紹
jQuery中提供了四種事件監(jiān)聽方式，分別是bind、live、delegate、on，對應(yīng)的解除監(jiān)聽的函數(shù)分別是unbind、die、undelegate、off。下面通過本文逐一給大家詳細(xì)介紹，感興趣的朋友一起看看吧
2016-10-10
JQuery樣式與屬性設(shè)置方法分析
這篇文章主要介紹了JQuery樣式與屬性設(shè)置方法,結(jié)合實(shí)例形式分析了jQuery屬性的獲取與設(shè)置、以及樣式的添加與刪除相關(guān)操作技巧,需要的朋友可以參考下
2019-12-12
jquery實(shí)現(xiàn)簡單的表單驗(yàn)證
這篇文章主要介紹了jquery實(shí)現(xiàn)簡單的表單驗(yàn)證，思路大概是先為每一個required添加必填的標(biāo)記，用each()方法來實(shí)現(xiàn)，感興趣的小伙伴們可以參考一下
2015-11-11
利用jquery和BootStrap實(shí)現(xiàn)動態(tài)滾動條效果
這篇文章主要介紹了利用jquery和BootStrap實(shí)現(xiàn)動態(tài)滾動條效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-12-12
使用jQuery給Table動態(tài)增加行、清空table的方法
這篇文章主要介紹了使用jQuery給Table動態(tài)增加行、清空table的方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-09-09