關于placeholder();

2018-3-9    seo達人

如果您想訂閱本博客內容,每天自動發(fā)到您的郵箱中, 請點這里 

搜索框有一些提示信息比如“關鍵字”之類,不寫吧用戶可能不知道這個搜索框是用來做什么的,寫了吧點擊搜索之后默認就把這些提示信息提交給數據處理頁面處理去了,有點麻煩,而且也沒有必要再去數據庫查一次這個提示信息。

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

藍藍設計m.sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://m.sillybuy.com

存檔