Geek asks and answers

Onchange in Firefox launches unchanged

I have a choice for which the event is set onchange.
The only problem in Firefox (FF v. 12) is that the event is onchangefired even if the user does not click on any option; just a hovering option is enough to trigger it.

ie: If the user presses the selection button, leads one of the options, and then clicks out of the selection, the selection value changes (even if the specified value is not displayed), thus, the event is triggered.

This does not happen if one of the selections is already selected. The behavior is more or less the same as in this Mozilla error: https://bugzilla.mozilla.org/show_bug.cgi?id=265047

+3
source share
1 answer

This, of course, is a bug in Firefox that assigns the selected value and the selected index when the elements hang, when the selected index is not selected.

Although I cannot fix the error, one workaround, which is pretty simple and works, adds an empty and hidden item to the list to be the first item and assign it as the selected item.

For instance:

<select id="mySelect">
    <option value="" style="display: none;"></option>
    <option value="1">first</option>
    <option value="2">second</option>
</select>

The user will not see any changes, and when you “clear” the selection, assign the selected index 0 instead of -1, for example.

var oDDL = document.getElementById("mySelect");
oDDL.selectedIndex = 0;

Live test case - behaves correctly even in Firefox now.

. IE8, . , , , Firefox. :

navigator.sayswho = (function(){
    var N = navigator.appName, ua= navigator.userAgent, tem;
    var M = ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);
    if (M && (tem = ua.match(/version\/([\.\d]+)/i)) != null) M[2] = tem[1];
    M = M? [M[1], M[2]]: [N, navigator.appVersion, '-?'];
    return M;
})();

window.onload = function() {
    var oDDL = document.getElementById("mySelect");
    oDDL.selectedIndex = 0;
    var blnFirefox = (navigator.sayswho[0].toLowerCase().indexOf("firefox") >= 0);
    if (!blnFirefox && oDDL.remove) {
        oDDL.remove(0);
        oDDL.selectedIndex = -1;
    }
    oDDL.onchange = function() {
        alert("hello");
    };
};

, , .

​​ - Firefox, Chrome, IE9 IE8.

+1

More articles:


All Articles