关于placeholder(); - 蓝蓝设计_UI设计公司

关于placeholder();

2018-3-9 释然 前端技术资源

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里 

搜索框有一些提示信息比如“关键字”之类,不写吧用户可能不知道这个搜索框是用来做什么的,写了吧点击搜索之后默认就把这些提示信息提交给数据处理页面处理去了,有点麻烦,而且也没有必要再去数据库查一次这个提示信息。

  可以用jquery 的插件 placeholder来解决这个问题,这个插件使用也很简单,在页面引入这个插件,    <script type="text/javascript" src="<%=basePath %>resources/scripts/jquery/jquery.placeholder.min.js"></script>(本人用的是miniui做的,所以引入的是jquery.placeholder.min.js)。

 在html中的输入框中如此设置

<div class="inputs">
         <input id="u_id" name="u_id" type="text" placeholder="请输入帐号"/>
 </div>
<div class="inputs">
     <input id="u_pass" name="u_pass" type="password" placeholder="请输入密码"/>
</div>

 js代码:

$(function(){
    $("input").placeholder();
    
    $("input").keydown(function(event) {  
        //alert(event.keyCode);
        if(event.keyCode==13){  
            login();  //转到登录的js方法
        }
    });
});

 但是问题来了,firefox,IE下都能实这个效果,chrome和safari点击后不会消失,得输入东西之后才会消失。本人在CSS方面菜鸟一只,后来让公司一位前段的同事去调试这个,最后在CSS里面加了一段:

input:focus::-webkit-input-placeholder,textarea:focus::

-webkit-input-placeholder{color:transparent;} 

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


标签: 关于placeholder();


Powered by emlog 京ICP备12006971号-1 sitemap