用JavaScript解决Placeholder的IE8兼容问题

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>??


8 thoughts on “用JavaScript解决Placeholder的IE8兼容问题

  1. html5 的话直接写 <script></script>就行,无需声明 type 和 language 了,默认就是 javascript

发表评论

电子邮件地址不会被公开。 必填项已用*标注