可以用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;}
就可以了。这段代码可能网上有,但是本人喜欢记录自己遇到的问题,以及解决方法。
其中的原理吧,咱也不懂,因为这可能涉及到浏览器内核什么的,还望知道的给讲解一下。