IE8常见兼容性问题总结

1.placeholder问题

IE8下，在获取input:text输入框的值时，若是输入框未输入，则会获取到placeholder属性的值。

1 <input type="text" id="id-input" placeholder="请输入查询条件"/>
2 <div class="w-btn orange-btn w120 w2-center" id="id-btn">获取输入框的值</div>

可用如下JS函数解决(需jQuery支持，入参selector即jQuery选择器)

function getValue(selector) {
        var jqObj = $(selector);
        if (jqObj.size() == 0) {
            return '';
        }
        var val = jqObj.val() || '';
        if (val == jqObj.attr('placeholder')) {
            return "";
        }
        return val;
    }

 

 2.IE8下实现对输入框的实时监听

主流浏览器用HTML5的标准事件oninput可实现对input输入框的实时监听，而IE6/7/8则不支持，可改成使用onpropertychange事件

这个事件在用户界面改变或者使用脚本直接修改内容两种状况下都会触发，举例以下：

• 修改了 input:checkbox 或者 input:radio 元素的选择中状态， checked 属性发生变化
• 修改了 input:text 或者 textarea 元素的值，value 属性发生变化
• 修改了 select 元素的选中项，selectedIndex 属性发生变化
• class发生变化等等...

<input type="text" id="id-text"/>

因实际使用中监听值(value)的变化的使用场景较多，可在JS响应事件中经过propertyName进行筛选，下降性能损耗

document.getElementById('id-text').attachEvent('onpropertychange', function (event) {
        if (event.propertyName !== 'value') {
            return;
        }
　　　   //dosomething...
    });

 

PS：在jQuery绑定事件时，未能找到获取变化propertyName的API，因此此处使用原生JS注册事件并获取了propertyName

 

3.IE8获取JS对象属性时候，要注意对象是否已经被声明

IE8下，undefined.XXX和undefined.XXX.XXX会报错，特别需注意ajax请求后的赋值，如后台response的值为空，属性值未赋上，再进行属性的获取，会出现问题。