16

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!!!

Improve this question

3 Answers 3

Reset to default
21

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');
    });
});
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Thank you. Im using pure javascript instead of jquery, but the concept worked :)
Is it possible show keyboard without real clicking? I tried to hide button and click programmaticaly, but also had no success: jsfiddle.net/alex_myronov/e5JcP/8 Also tried without buttons, by triggering click on input...
@alex.mironov: check this out. stackoverflow.com/questions/6837543/…
This works, as long as it was initiated from a click (from a different button, etc). It does not work if it was triggered by a different event, for example a setTimeout() or other random events
1

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

Comments

0

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);
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.