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 [email protected]

 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