Web前端开发——让ie 7 8支持placeholder属性
今天在写页面的时候,测试低版本浏览器时,发现input写的placeholder显示的是空白,所以特意写了一个普遍试用的方法来让低版本浏览器支持这个属性。
博主建了一个技术共享qq群:164858883,因为目前人数还比较少,活跃度还不是很高,希望有和我一样想法的,有志于技术共享的技术宅,富有逗比精神的程序猿能一起加入,一起探讨和分享,一起创造更大的进步。当然,妹纸程序猿更受欢迎哟。^_^
一般情况下,我们解决这个问题呢会使用下面这种方法。
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‘);//获取id属性 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
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。