Summary of IE8 Common Compatibility Issues

1. Placeholder problem

Under IE8, when obtaining the value of the input:text input box, if the input box is not input, the value of the placeholder attribute will be obtained.

1  < input type ="text" id ="id-input" placeholder ="Please enter the query criteria" /> 
2  < div class ="w-btn orange-btn w120 w2-center" id ="id-btn" > Get the value of the input box </ div >

The following JS functions can be used to solve (requires jQuery support, the input parameter selector is the jQuery selector)

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

 

 2. Real-time monitoring of input boxes under IE8

Mainstream browsers can use the HTML5 standard event oninput to realize real-time monitoring of the input input box, but IE6/7/8 does not support it, and the onpropertychange event can be used instead.

This event is fired both when the user interface changes or when the content is modified directly using a script, for example:

• Modified the selected state of the input:checkbox or input:radio element, and the checked attribute changed
• The value of the input:text or textarea element is modified, and the value attribute changes
• The selected item of the select element is modified, and the selectedIndex property changes
• class changes, etc...

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

Because there are many usage scenarios for monitoring value changes in actual use, you can filter by propertyName in JS response events to reduce performance loss

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

PS: When jQuery binds the event, the API for obtaining the changed propertyName cannot be found, so the native JS is used here to register the event and obtain the propertyName

 

3. When IE8 obtains JS object properties, pay attention to whether the object has been declared

Under IE8, undefined.XXX and undefined.XXX.XXX will report an error. Special attention should be paid to the assignment after the ajax request. For example, the value of the background response is empty and the attribute value is not assigned, and then the attribute acquisition will cause problems.