I am currently developing the login aspect inside a custom browser on ios. I want to open the keyboard when a user clicks on an input element. When an input element gets clicked, I set the ‘autofocus’ attribute for that element, followed by a focus on the element. However, these steps are not sufficient for opening the keyboard.
I have tried methods present in the link: IOS show keyboard on input focus, but nothing works.
The software version I’m working with is 14.4.2.
I am testing the app on an iPad.
var ev = new MouseEvent('click', {
'view': window,
'bubbles': true,
'cancelable': true,
'screenX': x,
'screenY': y
});
//x and y are the screen coordinates of the point where a user clicks.
var el = document.elementFromPoint(x, y);
console.log("Clicked element: "+el); //print element to console
el.addEventListener('click', function() {
el.setAttribute('autofocus', 'autofocus');
el.focus();
});
el.dispatchEvent(ev);
2
Answers
Programmatic focus using element.focus() doesn't trigger the system-level keyboard to open because WKWebView only shows the keyboard if the focus is initiated by a user. When the focus is triggered during user script evaluation, it is not considered as user interaction.
WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=243416
Changes done by Apple developers here: https://github.com/WebKit/WebKit/pull/2907
The changes are still in beta mode and have not yet been rolled out to the latest iPad OS version.
If you are testing your app in Simulator , make sure I/O -> Keyboard -> Connect Hardware Keyboard is unchecked. Otherwise, you won’t see the keyboard appear.