带提示的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>

login.zip (1.3 KB)
下载次数: 112

查看图片附件

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

jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例

使用placeholder属性设置input文本框的提示信息

html5中新的datalist自动下拉提示输入框

javascript input输入框模糊提示功能的实现

详解移动端HTML5页面端去掉input输入框的白色背景和边框（兼容Android和ios）

去除输入框input的缓存提示、自动填充

让input框实现类似百度的搜索提示(基于jquery事件监听)

HTML5中input输入框默认提示文字向左向右移动的示例代码

vue中使用element ui的input框做一个带远程搜索的输入框

autocomplete 实现的input输入框智能提示