针对IE8、IE9部分兼容问题的处理

最近一个项目需要兼容到IE8，因此针对IE8、IE9的一部分兼容问题总结如下：

1. IE8和IE9不支持placeholder属性，解决办法为：

$(function(){
  //判断浏览器是否支持placeholder属性
  supportPlaceholder = 'placeholder' in document.createElement('input'), //用in验证是否有placeholder属性，返回true或false
  placeholder=function( input ){
    var text = input.attr( 'placeholder' ), //设置placeholder属性（注：attr()方法不仅可以获取属性值，也可以设置新的属性）
    defaultValue = input.defaultValue;
    if( !defaultValue ){
      input.val( text ).addClass( "phcolor" );
    }
    input.focus( function(){
      if( input.val()  ==  text ){
        $( this ).val( "" );
      }
    });
    input.blur( function(){
      if( input.val()  ==  ""){
        $(this).val( text ).addClass("phcolor");
      }
    });
    //输入的字符不为灰色
    input.keydown(function(){
      $(this).removeClass("phcolor");
    });
  };
  //当浏览器不支持placeholder属性时，调用placeholder函数
  if(!supportPlaceholder){
    $('input').each(function(){
      text = $(this).attr("placeholder");
      if( $(this).attr("type")  ==  "text" ){
        placeholder( $(this) );
      }
    });
  }
});
复制代码

2. IE8中，以下代码密码框眼睛切换password和text无效，即：

以上代码在IE8中是无效的，解决办法为在互相切换时重写input的html（注：在input外加上一层span，方便重写input的html）：

3.  IE9以下不支持input事件：

$(document).on( 'input', '.rePassWord-input', function(){...} )是无效的

解决办法为：

$('.rePassWord-input').bind/on('propertychange', function(){...} )

其中，propertychange事件相当于input事件，被IE支持

另一个有效的解决办法是：

不进行兼容处理，直接把监听input事件换成监听keyup或keydown事件，该事件没有兼容问题

4. IE8中，border

border：4px solid rgba(255, 255, 255, 0.5)

其中rgba不被IE8支持，换做border: 4px solid rgb(255, 255, 255)，透明度0.5换做opacity: 0.5

5. IE中，兼容max-length用max属性