[原創]Web前端開發——讓ie 7 8支持表單的placeholder屬性

　　今天在寫頁面的時候，測試低版本瀏覽器時，發現input寫的placeholder顯示的是空白，因此特地寫了一個廣泛試用的方法來讓低版本瀏覽器支持這個屬性。

　　博主建了一個技術共享qq羣：，由於目前人數還比較少，活躍度還不是很高，但願有和我同樣想法的，有志於技術共享的技術宅，富有逗比精神的程序猿能一塊兒加入，一塊兒探討和分享，一塊兒創造更大的進步。固然，妹紙程序猿更受歡迎喲。^_^

　　通常狀況下，咱們解決這個問題呢會使用下面這種方法。

1 <input onfocus="if (value =='點擊文字消失'){value =''}" onblur="if (value ==''){value='點擊文字消失'}" />

這樣實現的特別累贅，而且用戶體驗也很差。而且每一個input都得加，這樣的代碼看起來就會很像一坨shit。

　　讓整個頁面都支持placeholder屬性，只須要在input裏面添加placeholder屬性便可，這樣纔是王道。不廢話了，不理解的加qq羣。直接上代碼。

　　

 1   /**
 2    * Created By Steven 
 3    * @author zhuttymore@126.com
 4    */
 5   $(document).ready(function(){
 6 
 7     $(':input').each(function(key,val){
 8       if(typeof ($(this).attr('placeholder')) != 'undefined'){
 9         var placeholder = $(val).attr('placeholder');//獲取placeholder屬性
10         $(this).css('color','#999');
11         $(this).val(placeholder);
12 
13         $(this).focus(function(){
14           if($(this).val() == placeholder){
15             $(this).val('');
16             $(this).css('color','inherit');
17           }
18         });
19 
20         $(this).blur(function(){
21           if($(this).val() == ''){
22             $(this).val(placeholder);
23             $(this).css('color','#999');
24           }else{
25             $(this).css('color','inherit');
26           }
27         });
28       }
29     });
30 });

 

　　遍歷全部input元素，添加focus和blur事件，並根據用戶輸入狀況隨時改變字體顏色，這樣用戶體驗更佳。不過呢，這樣會有一個bug, 就是在驗證表單是否爲空時會沒有效果。目前我給的解決方案是判斷它的值不等於placeholder的值。代碼以下：

　　

1  if($('#name').val()==''|| $('#name').val() === $('#name').attr('placeholder')){
2         layer.tips('不能夠空', '#name', {
3           tips: [1, '#f66200'],
4           time: 4000
5         });
6         return false;
7 
8       }

　　額，好吧，其實$('#name').val()==''至關因而一句廢話了。哈哈哈哈。。。。         ^_^   ps: 歡迎加羣吐槽。

     原創做品，轉載請保留原文，註明出處。http://zhutty.cnblogs.com