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
, ormouseup