关于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;} 

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

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


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值