Geek Answers Handbook

Blur () event does not fire in webkit browsers for selected form

I have a simple element <select>that contains several elements <option>inside:

<select id="dollarAmount">
    <option>select dollar amount</option>
    <option>$5</option>
    <option>$10</option>
    <option>$15</option>
    <option>$20</option>
</select>

This form is <select>displayed only when the user iterates over another element on the page:

$("#parentDiv").mouseenter(function(){  
    $("#selectFormDiv").show();  //dollarAmount contained in this div
});

After triggering the event mouseleaveon parentDiv, I make sure that the form is blurry, so that the options do not remain advanced. When it is blurry, I can confidently hide the containing <div id="selectFormDiv">so that the form and its container are hidden.

$("#parentDiv").mouseleave(function(){  
    $("#dollarAmount").blur();
    $("#selectFormDiv").hide();
});

: IE8 Firefox 5.1, Chrome 12.0 Safari 5.1. , - , , blur() <select> ( ? ). , parentDiv. hide() Chrome (- Opera), , , :

$("#parentDiv").mouseleave(function(){
    if($.browser.webkit) {
        $("#dollarAmount").hide();
        $("#selectFormDiv").hide();
    }
    else {
        $("#dollarAmount").blur();     //blur only triggers for non webkits?
        $("#selectFormDiv").hide();
    }
});

/, document.mouseup mouseleave, blur(). focusout, change click, , .

<select> <option> webkit ?

: blur(), , . dollarAmount, onblur . , , -, blur().

: http://jsfiddle.net/JpWLb/4/ -: <select>, <option> . , div. firefox IE $("#mySelect").blur() (yay!). webkit <select>, , : . , div.

+5
1

, . , select webkit, DOM , . , blur() . , mouseleave() !

: http://jsfiddle.net/JpWLb/

. , "ok". select, .

+2

More articles:


All Articles