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的值爲空，屬性值未賦上，再進行屬性的獲取，會出現問題。