jQuery focus和blur事件的應(yīng)用詳解
更新時(shí)間:2014年01月26日 10:01:47 作者:
本篇文章主要是對(duì)jQuery中focus和blur事件的應(yīng)用進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(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)擊后無文字,挪開鼠標(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)擊后無文字,挪開鼠標(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()無效問題分析
- jquery單選框radio綁定click事件實(shí)現(xiàn)方法
- jquery bind(click)傳參讓列表中每行綁定一個(gè)事件
- 使用jQuery的attr方法來修改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事件沖突問題
相關(guān)文章
jquery插件制作 提示框插件實(shí)現(xiàn)代碼
今天我們介紹的是提示框插件tooltip的制作,其中還會(huì)介紹到自定義選擇器插件的開發(fā)2012-08-08在jQuery中 關(guān)于json空對(duì)象篩選替換
本篇文章,小編將為大家介紹,在jQuery中 關(guān)于json空對(duì)象篩選替換,有需要的朋友可以參考一下2013-04-04jQuery事件綁定方法學(xué)習(xí)總結(jié)(推薦)
下面小編就為大家?guī)硪黄猨Query事件綁定方法學(xué)習(xí)總結(jié)(推薦)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11ASP.NET中基于JQUERY的高性能的TreeView補(bǔ)充
根據(jù) 假正經(jīng)哥哥 的博客整理,我第一次使用的另外的TREEVIEW,可是 做出來的效果 太卡,不知道什么原因。這次用的假正經(jīng)哥哥的這篇文章。2011-02-02jquery插件制作 表單驗(yàn)證實(shí)現(xiàn)代碼
今天的內(nèi)容是關(guān)于表單驗(yàn)證插件的制作。表單驗(yàn)證控件實(shí)現(xiàn)的主要功能是,當(dāng)表單提交的時(shí)候檢查必填項(xiàng)是否正確填寫,同時(shí)根據(jù)需要驗(yàn)證輸入信息是否符合規(guī)范2012-08-08jQuery實(shí)現(xiàn)獲取選中復(fù)選框的值實(shí)例詳解
這篇文章主要介紹了jQuery實(shí)現(xiàn)獲取選中復(fù)選框的值,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06jquery簡單實(shí)現(xiàn)滾動(dòng)條下拉DIV固定在頭部不動(dòng)
滾動(dòng)條下拉DIV固定在頭部不動(dòng)效果,想必很多的朋友都有見到過吧,下面為大家詳細(xì)介紹下使用jquery是如何實(shí)現(xiàn)的,感興趣的朋友可以參考下2013-11-11jQuery中triggerHandler()方法用法實(shí)例
這篇文章主要介紹了jQuery中triggerHandler()方法用法,實(shí)例分析了triggerHandler()方法的功能、定義及觸發(fā)被選元素的指定事件類型的使用技巧,需要的朋友可以參考下2015-01-01