2018-3-9 seo達(dá)人
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
搜索框有一些提示信息比如“關(guān)鍵字”之類,不寫吧用戶可能不知道這個(gè)搜索框是用來(lái)做什么的,寫了吧點(diǎn)擊搜索之后默認(rèn)就把這些提示信息提交給數(shù)據(jù)處理頁(yè)面處理去了,有點(diǎn)麻煩,而且也沒(méi)有必要再去數(shù)據(jù)庫(kù)查一次這個(gè)提示信息。
可以用jquery 的插件 placeholder來(lái)解決這個(gè)問(wèn)題,這個(gè)插件使用也很簡(jiǎn)單,在頁(yè)面引入這個(gè)插件, <script type="text/javascript" src="<%=basePath %>resources/scripts/jquery/jquery.placeholder.min.js"></script>(本人用的是miniui做的,所以引入的是jquery.placeholder.min.js)。
在html中的輸入框中如此設(shè)置
<div class="inputs">
<input id="u_id" name="u_id" type="text" placeholder="請(qǐng)輸入帳號(hào)"/>
</div>
<div class="inputs">
<input id="u_pass" name="u_pass" type="password" placeholder="請(qǐng)輸入密碼"/>
</div>
js代碼:
$(function(){
$("input").placeholder();
$("input").keydown(function(event) {
//alert(event.keyCode);
if(event.keyCode==13){
login(); //轉(zhuǎn)到登錄的js方法
}
});
});
但是問(wèn)題來(lái)了,firefox,IE下都能實(shí)這個(gè)效果,chrome和safari點(diǎn)擊后不會(huì)消失,得輸入東西之后才會(huì)消失。本人在CSS方面菜鳥一只,后來(lái)讓公司一位前段的同事去調(diào)試這個(gè),最后在CSS里面加了一段:
input:focus::-webkit-input-placeholder,textarea:focus::
-webkit-input-placeholder{color:transparent;}
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.wnxcall.com