Showing Android's soft keyboard when a field is .focus()'d using javascript

Question

In a web-page I've got a search field. I've added a "clear" button so that users can clear the search field and start again. As a convenience, I focus the search field's text box and the cursor does appear in the box. However the soft keyboard does not seem to show up on android devices that use the default browser. In iOS and Opera Mobile it works as I'd expect.

Is there an additional method I can call that will cause the keyboard to show on Android's browser so the user can start typing right away?

function clear_search() {
    if($('#searchinput').val()) {
        $('#searchinput').val('');
    }
    $('#searchinput').focus();
}

score 5 · Answer 1 · edited May 23 '17 at 12:10

5

this question is similar to How to focus an input field on Android browser through javascript or jquery

Anyway, as you already have a click event to work with, this should sort you out:

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

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

Of course you DO need a click event triggering this. Just focussing without an event doesnt seem to work. The above works for me on the standard browser on android 4 and shows the soft keyboard.

edited May 23 '17 at 12:10

Community

1
1

answered Aug 24 '12 at 16:22

user1207504

337
3
10

Just to note, this does not appear to work with a key press event (which is weird, because I would expect when focusing to a new text field using say, the tab or enter key, that the keyboard would display since I am focused on a text field...) – Michael Dec 06 '13 at 21:31
3

This works with touchstart + touchend events as well. Pretty nifty, as you could add a element on touchstart and trigger focus on touchend. Just remember to use event.stopPropagation(); and event.preventDefault(); as otherwise sometimes the keyboard will start showing and then hide again (depending on whats below the element triggering the event). – Michael Deal Sep 16 '14 at 22:37

score 2 · Answer 2 · answered May 23 '17 at 10:32

click() on its own 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.

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

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

score 1 · Accepted Answer · edited Dec 06 '13 at 21:42

1

I am not 100% sure but I think it can`t be done (at least until android 2.2) from javascript. If you are using phonegap you can use this here: https://github.com/phonegap/phonegap/wiki/How-to-show-and-hide-soft-keyboard-in-Android

edited Dec 06 '13 at 21:42

Michael

9,060
14
61
123

answered May 16 '11 at 17:27

Daniel Kurka

7,973
2
24
43

Even on android 2.2 @user1207504 's solution works if you use the latest Chrome. – Erdal G. Oct 19 '14 at 20:11

Showing Android's soft keyboard when a field is .focus()'d using javascript

3 Answers3

Linked