Search code examples
javascripthtmljqueryjquery-eventsandroid-browser

Onfocus event not triggered in HTML <select> box on Android

I want to listen for the onfocus-event of an HTML <select> dropdown box. The onfocus event is triggered in every browser except in the native Android browser (tested using Android 1.6 and Android 2.3.3).

I created the following code to demonstrate my issue:

<html>
    <body>
        <form>
            <select onfocus='$("#info").html("you got the focus!")'>
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select>
            <span id="info">No focus currently...</span>
        </form>            
    </body>
</html>

​ You can also see this on jsfiddle.

As said, this is working in every browser (tested using current versions of Chrome, Firefox and Internet Explorer), but not in the native Android browser. It is also working on mobile Safari on iPhone 3GS. Anyway, the onfocus event works on <input> elements on all browsers, also on Android native browser.

How can I make the onfocus event working on <select> elements in the Android browser?

Solution

  • This jQuery code does the trick for me now on Android devices

    $(document).ready(function(){
    $("#select").bind('mouseenter', function(event) {
      $(this).focus();
    });
    $("#select").bind('mouseleave', function(event) {
      $(this).blur();
    });
});​

    Basically, mouseenter and mouseleave events are triggered on Android devices. I found this out by logging all events which are triggered on the select element.

    The good thing is, that I still can use the onfocus event in my select element. The disadvantage is that this code must only be executed on Android devices.