8

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!

kangax
  • 38,898
  • 13
  • 99
  • 135
Ionut Bilica
  • 424
  • 1
  • 5
  • 11
  • 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 Jan 13 '12 at 23:07
  • I'm not using jQuery Mobile, just plain jQuery. See the example. – Ionut Bilica Jan 13 '12 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 Jan 14 '12 at 08: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 Jan 14 '12 at 09: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 Jan 14 '12 at 09:54
  • Hi, thanks for the suggestions, but they did not worked. This problem is retarded. I have a text input field and some buttons (word suggestions to be added to the input). On button click, I append the button value to the input field, and call focus on the input field. No focus sign is shown (no cursor, no orange border, nothing). The android soft keyboard stays on, and if the user presses a key, the focus is regained and everything is fine. I'm not having this problem on iOS. – Ionut Bilica Jan 14 '12 at 11:56
  • At this point, I'm going to hazard a guess and say it's weirdness in the Android WebKit implementation. Sorry it's not more helpful. :-) – Jason Lewis Jan 14 '12 at 17:33
  • I wish this had an answer, I can't figure out a solution for android os 2.2, 2.3, or 4.0+ – Anony372 Apr 13 '12 at 17:29
  • Have you tried triggering a click on the input field instead of focus? – Lazerblade Apr 15 '12 at 01:54

3 Answers3

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.

woobione
  • 358
  • 2
  • 9
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.

user1207504
  • 337
  • 3
  • 10
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();
}
bbsimonbb
  • 27,056
  • 15
  • 80
  • 110