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();
}

Community · Accepted Answer · 2017-05-23 12:10:52Z

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, 2017 at 12:10

CommunityBot

11 silver badge

answered Aug 24, 2012 at 16:22

user1207504

3673 silver badges11 bronze badges

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

2 Comments

Michael Over a year ago

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 Deal Over a year ago

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).

bbsimonbb · Accepted Answer · 2017-05-23 10:32:41Z

3

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();
}

answered May 23, 2017 at 10:32

bbsimonbb

29.3k18 gold badges93 silver badges129 bronze badges

Comments

Michael · Accepted Answer · 2013-12-06 21:42:06Z

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 6, 2013 at 21:42

Michael

9,51116 gold badges76 silver badges141 bronze badges

answered May 16, 2011 at 17:27

Daniel Kurka

7,9732 gold badges27 silver badges43 bronze badges

1 Comment

Erdal G. Over a year ago

Even on android 2.2 @user1207504 's solution works if you use the latest Chrome.

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related