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

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

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

先來看javascript的直接寫在了input上

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

jquery實現(xiàn)方法

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

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

復制代碼代碼如下:

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

blur()：失去焦點時使用，和onblur一樣。
如：

復制代碼代碼如下:

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

實例

復制代碼代碼如下:

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

jquery代碼

復制代碼代碼如下:

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

好了相當?shù)牟诲e吧

您可能感興趣的文章:

文本框焦點

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