熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

jQuery表單獲取和失去焦點輸入框提示效果的實例代碼

2013-11-15 12:11:00  來源: JSP教程 
這篇文章介紹了jQuery表單獲取和失去焦點輸入框提示效果的實例代碼有需要的朋友可以參考一下   復制代碼 代碼如下:

  
  $("#focus input_txt")each(function(){
  var thisVal=$(this)val();
  //判斷文本框的值是否為空有值的情況就隱藏提示語沒有值就顯示
  if(thisVal!=""){
  $(this)siblings("span")hide();
  }else{
  $(this)siblings("span")show();
  }
  //聚焦型輸入框驗證 
  $(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();
  //判斷文本框的值是否為空有值的情況就隱藏提示語沒有值就顯示
  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:px;margin:px auto;border:solid px #EDEDE;background:#FCFEF;
          padding:px;boxshadow: px px rgba() inset;}
 label{display:block;height:px;position:relative;margin:px ;}
 span{position:absolute;float:left;lineheight:px;left:px;color:#BCBCBC;cursor:text;}
 input_txt{width:px;border:solid px #ccc;boxshadow: px px rgba() inset;
          height:px;textindent:px;}
 input_txt:focus{boxshadow: px rgba();border:solid px #B;}
 border_radius{borderradius:px;color:#B;}
 h{fontfamily:"微軟雅黑";textshadow:px px px #fff;}
</style>
</head>
<body>
 <form class="border_radius" id="focus">
        <h>聚焦型提示語消失  無效果請刷新</h>
        <label><span>花瓣注冊郵箱</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">
     <h>輸入型提示語消失</h>
     <label><span>花瓣注冊郵箱</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>


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20443.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.