CODEWITHSUNDEEP
javascriptandroidgalaxy
29er
29er

Reputation: 9035

Can I trigger Android soft keyboard to open via javascript ( without phonegap )?

I have some custom web components in my mobile web app, whereas I need to manually fire 'focus' events on a field, to simulate the 'NEXT' functionality in the Android soft keyboard feature. ( using Galaxy S3 native browser ).

However, when I manually fire a focus event on a 'select' field, the native soft keyboard does not show. I have to subsequently click on the field to get it to show. (In IOS, of course, it works just fine).

So I'm wondering, if a 'focus' event doesn't trigger the soft keyboard to open, what JS event will ???

I am not using phonegap so I'm hoping there's a way without it.

Thanks for any help!!!

Upvotes: 16

Views: 45231

Answers (3)

Ambrus Tóth
Ambrus Tóth

Reputation: 672

Vanilla JS solution:

let button = document.getElementById("b");
let input = document.getElementById("i");

// Keyboard opens when focusing the input from a click listener
button.addEventListener("click", () => {
  input.focus();
});

// Input field gets focus but keyboard doesn't open.
setTimeout(() => {
  input.focus();
}, 1000);

Upvotes: 0

bbsimonbb
bbsimonbb

Reputation: 29020

You can do this by calling focus() then click() on the input. No need for jquery. Beware of endless loops if your script is triggered by an onclick() on a containing element. Make sure as well that this script is triggered by some user interaction. It won't work from document.onload(), or from a setTimeout(). It's also fragile with things like simultaneous style changes on the elements. 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();
}

Upvotes: 1

paulsm4
paulsm4

Reputation: 121809

Here's a link from StackOverflow:

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

Just focussing without an event doesnt seem to work. - you DO need a click event triggering this.

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

Upvotes: 21

Related Questions