可以用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;}
就可以了。這段代碼可能網上有,但是本人喜歡記錄自己遇到的問題,以及解決方法。
其中的原理吧,咱也不懂,因爲這可能涉及到瀏覽器內核什麼的,還望知道的給講解一下。