jQuery .focus() not working on android

Question

I'm developing a mobile website on Android where I have a select list as menu.

the select list is positioned outside the view area and I want to toggle the popup with the options on the browser by clicking a div.

I have already tried millions of ways to open the view to select a value, but none of them was successfull... After a little research I read on stackoverflow that the .focus() function is disabled on an android device.

I know this code works on IOS:

$(document).ready(function(){
    $("#navigation").click(function(){
        $("#mobileMenu").focus();
    });
});

with following html:

<select id="mobileMenu">
    <option value="link1" onclick='openMobileMenuLink' >link one</option>
    <option value="link2" onclick='openMobileMenuLink' >link two</option>
    <option value="link3" onclick='openMobileMenuLink' >link three</option>
</select>

Is there any way I can open the options perspective on the android device (I'm testing in chrome) without destroying the code (that works fine on IOS).

score 4 · Accepted Answer · answered Mar 22 '13 at 17:49

4

I finally found a solution:

when tapped on a div, a click event is generated with js.

<div onclick="generateSelectDropDown()">

The above div calls following function:

window.generateSelectDropDown = function () { 
    var dropdown = document.getElementById('mobileMenu');
    showDropdown(dropdown);
};  

showDropdown = function (element) {
    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    element.dispatchEvent(event);
};

answered Mar 22 '13 at 17:49

Hans Vn

787
1
16
32

1

This solution worked for me, with the caveat that it is also deprecated. I used `element.dispatchEvent(new MouseEvent('mousedown'));` instead to achieve the same result without using the deprecated `initMouseEvent` method. – orca Dec 02 '15 at 18:17

score -1 · Answer 2 · answered Feb 07 '13 at 17:21

-1

Not sure if this will still work in iOS, but it should...

$(document).ready(function(){
    $("#navigation").click(function(){
        $("#mobileMenu").click();
    });
});

answered Feb 07 '13 at 17:21

Reinstate Monica Cellio

25,975
6
51
67

jQuery .focus() not working on android

2 Answers2