织梦二次开发,二次开发,李丕长,网站php二次开发,做网站,模板设计,jquery效果,jquery特效

当前位置: 主页 > 网友推荐 >

用JavaScript解决Placeholder的IE8兼容问题

时间:2014-01-22 11:22作者:露馨儿 点击:
HTML5新加的Placeholder属性可以很方便的代替之前用onfocus,onblur的方法,并且比它更强大,但是万恶的IE8却不兼容。可以使用JavaScript来解决IE8兼容问题,在IE8下,自动替换成onfocus方法,在

 HTML5新加的Placeholder属性可以很方便的代替之前用onfocus,onblur的方法,并且比它更强大,

但是万恶的IE8却不兼容。

可以使用JavaScript来解决IE8兼容问题,在IE8下,自动替换成onfocus方法,

在支持HTML5的浏览器中则还是用Placeholder,不干扰。

首先需要添加jQuery

如果你的网站已经添加了jQuery,请忽略这一部。

在网站Head标签内添加:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js">

</script>

添加js代码

将以下代码添加到</body>之前的任意位置:

 
  1. <script type="text/javascript">   
  2.   if( !('placeholder' in document.createElement('input')) ){   
  3.   
  4.     $('input[placeholder],textarea[placeholder]').each(function(){    
  5.       var that = $(this),    
  6.       text= that.attr('placeholder');    
  7.       if(that.val()===""){    
  8.         that.val(text).addClass('placeholder');    
  9.       }    
  10.       that.focus(function(){    
  11.         if(that.val()===text){    
  12.           that.val("").removeClass('placeholder');    
  13.         }    
  14.       })    
  15.       .blur(function(){    
  16.         if(that.val()===""){    
  17.           that.val(text).addClass('placeholder');    
  18.         }    
  19.       })    
  20.       .closest('form').submit(function(){    
  21.         if(that.val() === text){    
  22.           that.val('');    
  23.         }    
  24.       });    
  25.     });    
  26.   }   
  27. </script>  

顶一下
(9)
64.3%
踩一下
(5)
35.7%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
露馨儿 查看详细资料 发送留言 加为好友 用户等级:高级会员 注册时间:2013-06-08 09:06 最后登录:2014-02-20 15:02
无觅相关文章插件,快速提升流量