jQuery focus和blur事件的應用詳解

更新時間：2014年01月26日 10:01:47 作者：

本篇文章主要是對jQuery中focus和blur事件的應用進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助

一、需求原因
在填寫表單時需要實現如下效果

二、具體實現

復制代碼代碼如下:

<!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>

您可能感興趣的文章:

PHP+mysql+Highcharts生成餅狀圖
本文將結合實際,使用PHP讀取Mysql數據表中的數據,并將獲取的數據按照要求輸出給前端JS,再通過配置調用Highcharts圖表庫生成餅狀圖。
2015-05-05
JQuery AJAX提交中文亂碼的解決方案
JQuery是一個非常優(yōu)秀的框架，在特定場合下使用JQuery提交數據，相當的方便快捷。但是，在處理一個GB2312編碼的網站AJAX提交時，中文數據卻成了亂碼。
2010-07-07
jquery插件制作提示框插件實現代碼
今天我們介紹的是提示框插件tooltip的制作，其中還會介紹到自定義選擇器插件的開發(fā)
2012-08-08
在jQuery中關于json空對象篩選替換
本篇文章，小編將為大家介紹，在jQuery中關于json空對象篩選替換，有需要的朋友可以參考一下
2013-04-04
jQuery事件綁定方法學習總結(推薦)
下面小編就為大家?guī)硪黄猨Query事件綁定方法學習總結(推薦)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-11-11
ASP.NET中基于JQUERY的高性能的TreeView補充
根據假正經哥哥的博客整理，我第一次使用的另外的TREEVIEW，可是做出來的效果太卡，不知道什么原因。這次用的假正經哥哥的這篇文章。
2011-02-02
jquery插件制作表單驗證實現代碼
今天的內容是關于表單驗證插件的制作。表單驗證控件實現的主要功能是，當表單提交的時候檢查必填項是否正確填寫，同時根據需要驗證輸入信息是否符合規(guī)范
2012-08-08
jQuery實現獲取選中復選框的值實例詳解
這篇文章主要介紹了jQuery實現獲取選中復選框的值，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-06-06
jquery簡單實現滾動條下拉DIV固定在頭部不動
滾動條下拉DIV固定在頭部不動效果，想必很多的朋友都有見到過吧，下面為大家詳細介紹下使用jquery是如何實現的，感興趣的朋友可以參考下
2013-11-11
jQuery中triggerHandler()方法用法實例
這篇文章主要介紹了jQuery中triggerHandler()方法用法,實例分析了triggerHandler()方法的功能、定義及觸發(fā)被選元素的指定事件類型的使用技巧,需要的朋友可以參考下
2015-01-01