关于placeholder();

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

  可以用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;} 

就可以了。这段代码可能网上有,但是本人喜欢记录自己遇到的问题,以及解决方法。

其中的原理吧,咱也不懂,因为这可能涉及到浏览器内核什么的,还望知道的给讲解一下。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章