首页>>表单>>文本框输入文字后提示语消失特效鼠标聚焦后消失和输入后消失2种(2018-08-03)

文本框输入文字后提示语消失特效鼠标聚焦后消失和输入后消失2种

文本框输入文字后提示语消失特效鼠标聚焦后消失和输入后消失2种
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. <script type="text/javascript">  
  2.  $(document).ready(function(){  
  3.   
  4.    $("#focus .input_txt").each(function(){  
  5.      var thisVal=$(this).val();  
  6.      //判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示  
  7.      if(thisVal!=""){  
  8.        $(this).siblings("span").hide();  
  9.       }else{  
  10.        $(this).siblings("span").show();  
  11.       }  
  12.      //聚焦型输入框验证   
  13.      $(this).focus(function(){  
  14.        $(this).siblings("span").hide();  
  15.       }).blur(function(){  
  16.         var val=$(this).val();  
  17.         if(val!=""){  
  18.          $(this).siblings("span").hide();  
  19.         }else{  
  20.          $(this).siblings("span").show();  
  21.         }   
  22.       });  
  23.     })  
  24.     $("#keydown .input_txt").each(function(){  
  25.      var thisVal=$(this).val();  
  26.      //判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示  
  27.      if(thisVal!=""){  
  28.        $(this).siblings("span").hide();  
  29.       }else{  
  30.        $(this).siblings("span").show();  
  31.       }  
  32.       $(this).keyup(function(){  
  33.        var val=$(this).val();  
  34.        $(this).siblings("span").hide();  
  35.       }).blur(function(){  
  36.         var val=$(this).val();  
  37.         if(val!=""){  
  38.          $(this).siblings("span").hide();  
  39.         }else{  
  40.          $(this).siblings("span").show();  
  41.         }  
  42.        })  
  43.      })   
  44.   })  
  45. </script>  

 


原文地址:http://www.freejs.net/article_biaodan_659.html