jQuery focus和blur事件的應(yīng)用詳解
更新時間：2014年01月26日 10:01:47 作者：
本篇文章主要是對jQuery中focus和blur事件的應(yīng)用進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
一、需求原因
在填寫表單時需要實現(xiàn)如下效果
二、具體實現(xiàn)
<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>鼠標(biāo)點擊后無文字，挪開鼠標(biāo)后有文字</title>
<script language="JavaScript"src="../jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
/*進入焦點時觸發(fā)*/
$("#account").focus(function(){
varoldValue = $(this).val();
if(oldValue == this.defaultValue){
$(this).val("");
}
});
/*失去焦點時觸發(fā)*/
$("#account").blur(function(){
alert("12");
varoldValue = $(this).val();
if(oldValue == ""){
$(this).val(this.defaultValue);
}
});
});
</script>
</head>
<body>
帳號：<input id="account"name="account" type="text" value="請輸入帳號">
</body>
</html>
在填寫表單時需要實現(xiàn)如下效果
二、具體實現(xiàn)
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>鼠標(biāo)點擊后無文字，挪開鼠標(biāo)后有文字</title>
<script language="JavaScript"src="../jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
/*進入焦點時觸發(fā)*/
$("#account").focus(function(){
varoldValue = $(this).val();
if(oldValue == this.defaultValue){
$(this).val("");
}
});
/*失去焦點時觸發(fā)*/
$("#account").blur(function(){
alert("12");
varoldValue = $(this).val();
if(oldValue == ""){
$(this).val(this.defaultValue);
}
});
});
</script>
</head>
<body>
帳號：<input id="account"name="account" type="text" value="請輸入帳號">
</body>
</html>
您可能感興趣的文章:
- jQuery中$.click()無效問題分析
- jquery單選框radio綁定click事件實現(xiàn)方法
- jquery bind(click)傳參讓列表中每行綁定一個事件
- 使用jQuery的attr方法來修改onclick值
- jquery 為a標(biāo)簽綁定click事件示例代碼
- jquery trigger偽造a標(biāo)簽的click事件取代window.open方法
- JQuery給元素綁定click事件多次執(zhí)行的解決方法
- jQuery防止click雙擊多次提交及傳遞動態(tài)函數(shù)或多參數(shù)
- jquery focus(fn),blur(fn)方法實例代碼
- jQuery解決input元素的blur事件和其他非表單元素的click事件沖突問題
相關(guān)文章
jQuery中為我們提供了很多有用的方法和屬性，自己總結(jié)的一些常用的函數(shù)，方法。個人認(rèn)為在開發(fā)中會比較常用的，僅供大家學(xué)習(xí)和參考。2009-06-06
現(xiàn)在jquery應(yīng)用的越來越多, 有些同學(xué)在享受爽快淋漓coding時就將性能問題忽略了, 比如我. jquery雖在諸多的js類庫中性能表現(xiàn)還算優(yōu)秀, 但畢竟不是在用原生的javascript開發(fā), 性能問題還是需要引起重視的.2010-02-02
jquery UI Datepicker時間控件的使用方法（基礎(chǔ)版）
這篇文章主要介紹了jquery ui datepicker時間控件的使用方法，需要的朋友可以參考下2015-11-11
這篇文章主要介紹了jquery帶下拉菜單和焦點圖代碼，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
這篇文章主要介紹了jQuery插件實現(xiàn)彈性運動,結(jié)合完整實例形式分析了jQuery插件擴展結(jié)合定時器實現(xiàn)頁面元素抖動的相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
jquery的構(gòu)造函數(shù)很好的運用的javascript的充分利用了JavsScript語言的動態(tài)性——對行參的類型和個數(shù)沒有的嚴(yán)格要求，以至于一個函數(shù)可以實現(xiàn)多種功能需求，也為JavaScript語言的多態(tài)性提供了基礎(chǔ)，在這個構(gòu)造函數(shù)中，提供了六種不同的調(diào)用格式（根據(jù)官方API文檔）2015-05-05
浮動DIV定時顯示提示信息,如操作成功, 失敗等,需要的朋友可以參考下。2011-02-02
jquery實現(xiàn)的圖文滾動效果,圖文內(nèi)容經(jīng)過指定的間隔時間自動向下滾動顯示,效果非?？?。有需要的小伙伴可以參考下。2015-05-05
jQuery實現(xiàn)表格元素動態(tài)創(chuàng)建功能
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)表格元素動態(tài)創(chuàng)建功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
前幾篇文章中的示例代碼，去掉了幾個 bug, 這里一起提供下載。2010-08-08