How to focus an input field on Android browser through javascript or jquery

Question

I've tried $('#field').focus(), and any other method found on the internet. Nothing worked. I have a simple html that reproduces the problem.

<!DOCTYPE html> 
<html> 
    <head> 
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#field').focus();
            });
    </script>
</head> 
<body>
    <input type="text" id="field" name="field"/>
</body>
</html>

Please help!

There's no reason this shouldn't work, unless you're using jQuery Mobile. jQuery Mobile changes the DOM lifecycle from what you'd normally expect. — Jason Lewis
– Jason Lewis, Commented Jan 13, 2012 at 23:07
I'm not using jQuery Mobile, just plain jQuery. See the example. — Ionut Bilica
– Ionut Bilica, Commented Jan 13, 2012 at 23:22
It surely can be done, I see it on the Google's search page, when you press the arrow on the suggestions. But they have their js minimized, I can't understand how it's done. — Ionut Bilica
– Ionut Bilica, Commented Jan 14, 2012 at 8:43
Have you tried placing the #focus() method call within a browser event callback to see fi ti works that way? I don';t understand why the Android version of WebKit would deviate from the chrome version in this manner... it might help to have a case where it doesn't deviate from expected behavior in order to understand the case where it does. — Jason Lewis
– Jason Lewis, Commented Jan 14, 2012 at 9:51
Alternately, have you tried wrapping the call in an anonymous function to be executed within the call to document.ready()? for instance: $(document).ready(function() { (function() {$('#field').focus();}); }); Occasionally wrapping an action within an anonymous function subject to immediate execution solves random inexplicable JS issues. — Jason Lewis
– Jason Lewis, Commented Jan 14, 2012 at 9:54

woobione · Accepted Answer · 2012-04-20 08:49:10Z

5

Actually, the general javascript function "focus" is deactivated in the android browser. Hence, the jQuery focus function is deactivated since it's using the above.

answered Apr 20, 2012 at 8:49

woobione

3582 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ʇsәɹoɈ Over a year ago

Can you link a source of more information on this, or a workaround?

user1207504 · Accepted Answer · 2012-08-24 16:09:22Z

1

if you bind it to another click event it will work. This works for me:

    $(document).ready(function()
    {

       $('#field').click(function(e){ $(this).focus(); });

            $('body').click(function(e)
            {
                $('#field').trigger('click');
            })
    })

Will pop up the software keyboard. trigger() will trigger any event you give it. In this case the default behaviour of clicking on the field == tap == focus == win! Note: this call is bound to another click event happening.

answered Aug 24, 2012 at 16:09

user1207504

3673 silver badges11 bronze badges

Comments

bbsimonbb · Accepted Answer · 2017-05-23 10:34:42Z

0

click() or focus() alone is not enough. You need to focus() then click(). Beware of endless loops if your script is triggered by an onclick() on a containing element. The script below is working for me on Chrome for android 58 and Safari mobile 602.1. Soft keyboard popping nicely.

var target = document.getElementsByTagName("input")[0];

if (event.target != target) {
    target.focus();
    target.click();
}

answered May 23, 2017 at 10:34

bbsimonbb

29.3k18 gold badges92 silver badges129 bronze badges

Collectives™ on Stack Overflow

How to focus an input field on Android browser through javascript or jquery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related