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