Clever Geek Handbook

JQuery.focus () not working on android

I am developing a mobile site on Android where I have a select list as a menu.

the select list is located outside of the viewport and I want to toggle the options popup in the browser by clicking on the div.

I've already tried millions of ways to open a view to select a value, but none have been successful ... After a little research, I read this StackOverflow question 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 the 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 a way to open the perspective of options on an android device (I'm testing in chrome) without breaking the code (which works fine on IOS).

+3


source to share


3 answers


Finally I found a solution:

when the div is clicked, the click event is fired with js.

<div onclick="generateSelectDropDown()">


The above div calls the 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);
};
+4


source


Your solution only works for me if the selected item is in the view. How did you position it out of sight while still calling it with your JavaScript solution? I made it "position: fixed; top: -99999px" and once I did that the script doesn't seem to do anything :(



0


source


Not sure if this will work anyway on iOS, but it should ...

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


source






More articles:


All Articles