说起HTML5,相信大家已经都不在陌生了,一些HTML5的新方法,也被越来越多的浏览器认可,极大的方便了我们这些开发人员。但是有些公司可能还沉醉在IE,6,7,8,9等早期浏览器当中不能自拔,这让一些想用HTML5开发的程序员头疼不已,毕竟兼容问题自浏览器存在以来就亘古长存了。

今天小呆想分享的是关于HTML5 placeholder属性兼容IE9及以下浏览器的用法,如果你还不会使用placeholder,可以阅读小萌之前的文章《input placeholder的用法》话不多说,上代码。

  1. /* 用来写兼容时的文字颜色 */
  2. .placeholder{
  3. color:#323232;
  4. }
CSS
  1. if(!_this.placeholderSupport()){
  2. $('[placeholder]').focus(function() {
  3. var input = $(this);
  4. if (input.val() == input.attr('placeholder')) {
  5. input.val('');
  6. input.removeClass('placeholder');
  7. }
  8. }).blur(function() {
  9. var input = $(this);
  10. if (input.val() == '' || input.val() == input.attr('placeholder')) {
  11. input.addClass('placeholder');
  12. input.val(input.attr('placeholder'));
  13. }
  14. }).blur();
  15. };
  16. function placeholderSupport(){
  17. return 'placeholder' in document.createElement('input'); //textarea也是支持的
  18. }
JavaScript

placeholder属性兼容IE9及以下浏览器的用法

placeholder属性兼容IE9及以下浏览器的用法

placeholder属性兼容IE9及以下浏览器的用法

placeholder属性兼容IE9及以下浏览器的用法

placeholder属性兼容IE9及以下浏览器的用法
placeholder属性兼容IE9及以下浏览器的用法