快捷導(dǎo)航

在js(jquery)中獲得文本框焦點(diǎn)和失去焦點(diǎn)的方法

更新時(shí)間：2012年12月04日 21:37:58 作者：

文章介紹兩個(gè)方法和種是利用javascript onFocus onBlur來(lái)判斷焦點(diǎn)和失去焦點(diǎn)，加一種是利用jquery $("p").blur(); 或$("p").blur(fn)來(lái)實(shí)現(xiàn)，有需要的朋友可以參考一下

先來(lái)看javascript的直接寫(xiě)在了input上

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

 
<input name="pwuser" type="text" id="pwuser" class="input" value="樓盤(pán)賬號(hào)" onBlur="if(this.value=='') this.value='樓盤(pán)賬號(hào)';" onFocus="if(this.value=='樓盤(pán)賬號(hào)') this.value='';" /> 
<input name="pwpwd" type="password" class="input1" value="******" onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';"> 

jquery實(shí)現(xiàn)方法

對(duì)于元素的焦點(diǎn)事件，我們可以使用jQuery的焦點(diǎn)函數(shù)focus(),blur()。

focus()：得到焦點(diǎn)時(shí)使用，和javascript中的onfocus使用方法相同。
如：

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

$("p").focus(); 或$("p").focus(fn)

blur()：失去焦點(diǎn)時(shí)使用，和onblur一樣。
如：

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

$("p").blur(); 或$("p").blur(fn)

實(shí)例

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

 
<form> 
<label for="searchKey" id="lbSearch">搜神馬？</label> 這里label覆蓋在文本框上，可以更好的控制樣式 
<input id="searchKey" type="text" /> 
<input type="submit" value="搜索" /> 
</form> 

jquery代碼

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

 
$(function() { 
$('#searchKey').focus(function() { 
$('#lbSearch').text(''); 
}); 
$('#searchKey').blur(function() { 
var str = $(this).val(); 
str = $.trim(str); 
if(str == '') 
$('#lbSearch').text('搜神馬？'); 
}); 
}) 

好了相當(dāng)?shù)牟诲e(cuò)吧

您可能感興趣的文章:

文本框焦點(diǎn)

相關(guān)文章

JavaScript手寫(xiě)call,apply,bind方法
這篇文章主要介紹了JavaScript手寫(xiě)call,apply,bind方法，call，bind，apply方法都是JavaScript原生的方法，掛載在Function原型上,使得所有函數(shù)都可以調(diào)用
2022-06-06
網(wǎng)站404頁(yè)面3秒后跳到首頁(yè)的實(shí)例代碼
我們看到很多網(wǎng)站會(huì)有有錯(cuò)誤404頁(yè)面，當(dāng)頁(yè)面不存存時(shí)就會(huì)提示，然后過(guò)幾秒就會(huì)自動(dòng)跳到首頁(yè)了，下面我來(lái)給大家舉一個(gè)404錯(cuò)誤頁(yè)面跳到首頁(yè)實(shí)例，各位可參考，有需要的朋友可以參考一下
2013-08-08
TypeScript入門(mén)-基本數(shù)據(jù)類(lèi)型
本文主要介紹了TypeScript基本數(shù)據(jù)類(lèi)型的相關(guān)知識(shí)。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-03-03
javascript自執(zhí)行函數(shù)
本文主要介紹了javascript自執(zhí)行函數(shù)的相關(guān)知識(shí)。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-02-02
JavaScript中如何讓?x?==?1?&&?x?==?2?&&?x?==?3?等式成立
這篇文章主要介紹了JavaScript中如何讓x==1&&x==2&&x==3等式成立，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-07-07
JS如何通過(guò)FileReader獲取.txt文件內(nèi)容
今天小編就為大家分享一篇JS如何通過(guò)FileReader獲取.txt文件內(nèi)容，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2021-12-12
setTimeout 不斷吐食CPU的問(wèn)題分析
有時(shí)候我們?cè)谑褂胹etTimeout的時(shí)候會(huì)導(dǎo)致IE特別占用cpu，有可能會(huì)導(dǎo)致死機(jī)等情況。
2009-04-04
JS實(shí)現(xiàn)密碼框根據(jù)焦點(diǎn)的獲取與失去控制文字的消失與顯示效果
這篇文章主要介紹了JS實(shí)現(xiàn)密碼框根據(jù)焦點(diǎn)的獲取與失去控制文字的消失與顯示效果,可實(shí)現(xiàn)使用JavaScript判斷密碼框是否獲得焦點(diǎn)來(lái)隱藏與顯示提示文字,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2015-11-11
詳細(xì)講解JavaScript中的this綁定
在javascript的函數(shù)中，除了聲明時(shí)定義的形參之外，每個(gè)函數(shù)還可以接收兩個(gè)附加的參數(shù)：this和arguments。這里就講一下this的作用以及不同場(chǎng)景下它的不同指向。
2016-10-10
鼠標(biāo)經(jīng)過(guò)顯示二級(jí)菜單js特效
本文章來(lái)給大家推薦一個(gè)不錯(cuò)的鼠標(biāo)經(jīng)過(guò)顯示二級(jí)菜單js特效效果，有需要了解的朋友可以參考一下
2013-08-08