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>鼠標點擊后無文字，挪開鼠標后有文字</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>鼠標點擊后無文字，挪開鼠標后有文字</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標簽綁定click事件示例代碼
- jquery trigger偽造a標簽的click事件取代window.open方法
- JQuery給元素綁定click事件多次執(zhí)行的解決方法
- jQuery防止click雙擊多次提交及傳遞動態(tài)函數(shù)或多參數(shù)
- jquery focus(fn),blur(fn)方法實例代碼
- jQuery解決input元素的blur事件和其他非表單元素的click事件沖突問題
相關(guān)文章
本文將結(jié)合實際,使用PHP讀取Mysql數(shù)據(jù)表中的數(shù)據(jù),并將獲取的數(shù)據(jù)按照要求輸出給前端JS,再通過配置調(diào)用Highcharts圖表庫生成餅狀圖。2015-05-05
JQuery是一個非常優(yōu)秀的框架，在特定場合下使用JQuery提交數(shù)據(jù)，相當?shù)姆奖憧旖荨?但是，在處理一個GB2312編碼的網(wǎng)站AJAX提交時，中文數(shù)據(jù)卻成了亂碼。2010-07-07
今天我們介紹的是提示框插件tooltip的制作，其中還會介紹到自定義選擇器插件的開發(fā)2012-08-08
本篇文章，小編將為大家介紹，在jQuery中 關(guān)于json空對象篩選替換，有需要的朋友可以參考一下2013-04-04
jQuery事件綁定方法學(xué)習(xí)總結(jié)(推薦)
下面小編就為大家?guī)硪黄猨Query事件綁定方法學(xué)習(xí)總結(jié)(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
ASP.NET中基于JQUERY的高性能的TreeView補充
根據(jù) 假正經(jīng)哥哥 的博客整理，我第一次使用的另外的TREEVIEW，可是 做出來的效果 太卡，不知道什么原因。這次用的假正經(jīng)哥哥的這篇文章。2011-02-02
今天的內(nèi)容是關(guān)于表單驗證插件的制作。表單驗證控件實現(xiàn)的主要功能是，當表單提交的時候檢查必填項是否正確填寫，同時根據(jù)需要驗證輸入信息是否符合規(guī)范2012-08-08
jQuery實現(xiàn)獲取選中復(fù)選框的值實例詳解
這篇文章主要介紹了jQuery實現(xiàn)獲取選中復(fù)選框的值，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06
jquery簡單實現(xiàn)滾動條下拉DIV固定在頭部不動
滾動條下拉DIV固定在頭部不動效果，想必很多的朋友都有見到過吧，下面為大家詳細介紹下使用jquery是如何實現(xiàn)的，感興趣的朋友可以參考下2013-11-11
這篇文章主要介紹了jQuery中triggerHandler()方法用法,實例分析了triggerHandler()方法的功能、定義及觸發(fā)被選元素的指定事件類型的使用技巧,需要的朋友可以參考下2015-01-01