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

這篇文章介紹了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