jQuery表單獲取和失去焦點(diǎn)輸入框提示效果的實(shí)例代碼

更新時(shí)間：2013年08月01日 16:23:37 作者：

這篇文章介紹了jQuery表單獲取和失去焦點(diǎn)輸入框提示效果的實(shí)例代碼，有需要的朋友可以參考一下

  $("#focus .input_txt").each(function(){
  var thisVal=$(this).val();
  //判斷文本框的值是否為空，有值的情況就隱藏提示語(yǔ)，沒(méi)有值就顯示
  if(thisVal!=""){
  $(this).siblings("span").hide();
  }else{
  $(this).siblings("span").show();
  }
  //聚焦型輸入框驗(yàn)證 
  $(this).focus(function(){
  $(this).siblings("span").hide();
  }).blur(function(){
  var val=$(this).val();
  if(val!=""){
  $(this).siblings("span").hide();
  }else{
  $(this).siblings("span").show();
  } 
  });
  })
  $("#keydown .input_txt").each(function(){
  var thisVal=$(this).val();
  //判斷文本框的值是否為空，有值的情況就隱藏提示語(yǔ)，沒(méi)有值就顯示
  if(thisVal!=""){
  $(this).siblings("span").hide();
  }else{
  $(this).siblings("span").show();
  }
  $(this).keyup(function(){
  var val=$(this).val();
  $(this).siblings("span").hide();
  }).blur(function(){
  var val=$(this).val();
  if(val!=""){
  $(this).siblings("span").hide();
  }else{
  $(this).siblings("span").show();
  }
  })
  }) 
  })
</script>
<style type="text/css">
 form{width:400px;margin:10px auto;border:solid 1px #E0DEDE;background:#FCF9EF;
          padding:30px;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;}
 label{display:block;height:40px;position:relative;margin:20px 0;}
 span{position:absolute;float:left;line-height:40px;left:10px;color:#BCBCBC;cursor:text;}
 .input_txt{width:398px;border:solid 1px #ccc;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;
          height:38px;text-indent:10px;}
 .input_txt:focus{box-shadow:0 0 4px rgba(255,153,164,0.8);border:solid 1px #B00000;}
 .border_radius{border-radius:5px;color:#B00000;}
 h2{font-family:"微軟雅黑";text-shadow:1px 1px 3px #fff;}
</style>
</head>
<body>
 <form class="border_radius" id="focus">
        <h2>聚焦型提示語(yǔ)消失  無(wú)效果請(qǐng)刷新</h2>
        <label><span>花瓣注冊(cè)郵箱</span><input type="text" class="input_txt border_radius"  />
        </label>
        <label><span>密碼</span><input type="text" class="input_txt border_radius" /></label>
    </form>
 <form class="border_radius" id="keydown">
     <h2>輸入型提示語(yǔ)消失</h2>
     <label><span>花瓣注冊(cè)郵箱</span><input type="text" class="input_txt border_radius"  />
       </label>
        <label><span>密碼</span><input type="text" class="input_txt border_radius" /></label>
    </form>
</body>
</html>

您可能感興趣的文章:

相關(guān)文章

結(jié)合JQ1.9通過(guò)js正則判斷各種瀏覽器版本的方法
本篇文章主要是對(duì)結(jié)合JQ1.9通過(guò)js正則判斷瀏覽器版本的方法進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-12-12
jQuery實(shí)現(xiàn)鼠標(biāo)懸停顯示提示信息窗口的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)懸停顯示提示信息窗口的方法,涉及jQuery操作鼠標(biāo)事件及show、hide等方法的使用技巧,需要的朋友可以參考下
2015-04-04
簡(jiǎn)單易擴(kuò)展可控性強(qiáng)的Jquery轉(zhuǎn)盤(pán)抽獎(jiǎng)程序
今天小編就為大家分享一篇關(guān)于簡(jiǎn)單易擴(kuò)展可控性強(qiáng)的Jquery轉(zhuǎn)盤(pán)抽獎(jiǎng)程序，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧
2019-03-03
jquery實(shí)現(xiàn)tab菜單切換內(nèi)容(精簡(jiǎn)版demo)
這篇文章主要為大家介紹了jquery實(shí)現(xiàn)tab菜單切換內(nèi)容的精簡(jiǎn)方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-10-10
addEventListener—jQuery的事件監(jiān)聽(tīng)方法
在Javascript中，事件監(jiān)聽(tīng)是非常重要的，通過(guò)事件監(jiān)聽(tīng)，我們可以在用戶執(zhí)行某些操作時(shí)觸發(fā)相應(yīng)的處理程序。最初，Javascript監(jiān)聽(tīng)事件的方式是addEvent。addEvent()比較麻煩，所以jQuery為我們提供了一個(gè)更為便捷的事件監(jiān)聽(tīng)方法：addEventListener。
2023-06-06
jquery選擇checked在ie8普通模式下的問(wèn)題
這篇文章主要介紹了jquery選擇checked在ie8普通模式下的問(wèn)題,需要的朋友可以參考下
2014-02-02
用jquery寫(xiě)的菜單從左往右滑動(dòng)出現(xiàn)
這篇文章主要介紹了用jquery寫(xiě)的菜單從左往右滑動(dòng)出現(xiàn)的效果,需要的朋友可以參考下
2014-04-04
jQuery+AJAX實(shí)現(xiàn)遮罩層登錄驗(yàn)證界面（附源碼）
這篇文章主要介紹了jQuery+AJAX實(shí)現(xiàn)遮罩層登錄驗(yàn)證界面，并分享了源碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2015-10-10
Jquery從頭學(xué)起第四講 jquery入門(mén)教程
今天主要講如何給主要的控件賦值，因?yàn)樵谧鼍W(wǎng)站的時(shí)候，很多時(shí)候需要初始化表單，所有給控件賦值就成必然的了。
2010-08-08
jQuery的deferred對(duì)象使用詳解
deferred對(duì)象就是jQuery的回調(diào)函數(shù)解決方案。在英語(yǔ)中，defer的意思是"延遲"，所以deferred對(duì)象的含義就是"延遲"到未來(lái)某個(gè)點(diǎn)再執(zhí)行。
2016-09-09