欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

带提示的input输入框类似html5的 placeholder

程序员文章站 2022-03-02 11:17:00
...

Html5带来了 placeholder

<input id="t1" type="text" placeholder="请输入文字" />

 轻松实现 简单不...但是扩展性比较差 而且ie等浏览器支持不是很完善 而且各主流浏览器支持效果不是很统一

 

所以还是jquery/js 比较实用...简单实现起来也不是很复杂 并且统一性比较强大

带提示的input输入框类似html5的 placeholder
            
    
    博客分类: JavaScript/Jquery jqueyjshtmlcsslogin 

 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>文本框输入文字后提示语消失特效 </title>  
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>  
    <script type="text/javascript">  
     $(document).ready(function(){  
      
       $("#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: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>聚焦型提示语消失</h2>  
            <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">  
         <h2>输入型提示语消失</h2>  
         <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>  
      
    <p><script type="text/javascript" src="http://d.lanrentuku.com/goto/js-preview-728x90.js"></script></p>  
    </body>  
    </html>  
  • 带提示的input输入框类似html5的 placeholder
            
    
    博客分类: JavaScript/Jquery jqueyjshtmlcsslogin 
  • 大小: 22.7 KB