javascript – Automatically open mobile keyboard

Question:

I currently have the following block tied to user action.

$(".class-botao").focus()

When the user interacts with the page the mobile keyboard is displayed normally.

However, in my application there is a method that checks if there is any empty input when loading the page and if there is I give a .focus() on the element;

autoFocus: function(scope) {
    var firstInput = $('.class-input.empty:required').filter(':first:visible');

    if (!firstInput.length) {
        return false;
    }

    firstInput.focus();
    return true;
},

Everything works normally but the keyboard doesn't appear (IOS/Android),

I've tried to simulate .trigger('click // touchstart') right after focus() , but no keyboard appears :/

Does anyone have any tips?

Answer:

The virtual keyboard of mobile devices can only be activated by user actions , by usability settings.

Thus, the correct method to invoke the keyboard on mobile devices is through the input element type, for example:

<input type="text" /> automatically invoke the default alphanumeric keyboard when receiving focus, while
<input type="number" /> invoke the numeric keypad

There are two exceptions for javascript:

  • Some say the global prompt() method works
  • Fire the focus event within events raised by user action, for example: click , mousedown , or mouseup
Scroll to Top