Develop Reference

How to set focus and display keyboard in safari with jQuery

I'm trying to set focus and place the cursor in a text box and bring up the keyboard automatically when I pop up a modal dialog. I don't want the user to click anywhere. This works fine everywhere except on mobile Safari.
I tried focus(), touchstart, timeouts, direct and indirect event generation, etc. with jQuery with no luck. Does anyone have any ideas?

Try to generate a click event after setting the focus

Android Talkback not registering onFocus for web. How do I manipulate accessibility focus with Android Talkback?

As the title says, Android Talkback is not registering the onFocus event. I understand that the onFocus event is not ever registered since the screen reader is using a special type of accessibility focus. How, then, can we drive/manipulate the accessibility focus to provide the user a better experience?
I have an example here: https://codesandbox.io/s/r54j2mqrl4 . So here the console.log("hello!") is not registering for me in mobile Android Talkback, however it is registering correctly on desktop mac OSX(with no screen reader on). I am using the tab key to navigate.
Is there something similar to an onFocus event to use for Android Talkback's accessibility focus?
Thank you in advance for your time.
Device and versions:
Mobile Android Talkback: Samsung Galaxy Tab S2, Android version 7.0, Google Chrome 62.0.3202.84
Desktop Mac OSX: macOS Sierra 10.12.6, Google Chrome 61.0.3163.100

The ".focus()" method theoretically should work. The problem would come into play in the event that the thing that was receiving "focus" would not also receive accessibility focus. An Android Accessibility Service can only accessibility focus things that are also Accessibility focusable.
Unfortunately you cannot manipulate Accessibility Focus directly from Javascript, only focus. This being said, when you're in Android and something requests focus, this usually suggests accessibility focus will also move to that item along with focus. In TalkBack terms, this is how Tab navigation works, Accessibility Focus just follows input focus around. It's not perfect, but it's a reasonable expectation that Focus and Accessibility Focus want to be the same. Though not always: EditTexts can be in an quazi focused/unfocused state in TalkBack, for good reason... you may need to interact with the onscreen keyboard while the field still has the cursor (input focus).
If the following is true:
Your Element is Accessibility Focusable
Your element is focusable
The thing that is A11yFocusable and the thing that is focusable are the same, and not just descendants (very important).
You can easily confirm the above three things by exploring in Android Device monitor. Triple check that you aren't focusing something (like a child of the element) of the thing that you are envision getting accessibility focus.
If, after that, you call .focus() on the thing, and it doesn't work, you have essentially found a bug in the webview you are using to render your HTML/Javascript content, and no there is nothing you can do about it.

Windows 10 Tablet Browser: soft keyboard very buggy

I have a tablet html app. Some pages have <input> and <textarea> together with many other elements: links, menus, texts, ...
If I don't press any <input> or <textarea> everything works ok
As soon as I press one input element, the soft keyboard pops up (as expected).
After entering some text and hiding the keyboard, the keyboard pops up again everytime I click anywhere on the webapp (even in non-focusable elements)
This totally ruins the experience, as you are forced to use the web app with the keyboard always shown.
I have tried many different approaches to manipulate the input focus without any success, like calling blur(), focus() and related methods on the focused component, containers, window ... but seems nothing but reloading the page resets the keyboard state to keep hidden again until a focusable element is tapped.
My experiments:
Checked that pressing outside of the <INPUT> / <TEXTAREA> causes the focus to be removed: onblur() gets called, and document.activeElement returns NULL.
Also tried to manually blur() everything in the document after an onchange is triggered:$("input,textarea").blur() .
Tried to manually giving the focus() to a non-interactive element with a TABINDEX (hacky):
<div id="dummyfocus" tabindex="0">
$("#dummyfocus").focus()
I checked that the dummy element in fact receives focus, the input/textarea unfocuses, but even in this case, the problem persists.
In Android or IOS everything works as expected: Keyboard will not auto-show if no <input> or <textarea> is focused.
Any advice? Any funky microsoft-proprietary css tag I haven't heard about? :)

I have similar issue, after some digging find out that issue reproducible on Microsoft Edge browser( used in win10 uap as rendering engine).
When clicked anywhere active element becomes body element and for some reason (maybe bug) keyboard gets activated, so I added tabindex=0 on container div which is nested in body, so when clicked outside of any focus-able element that container becomes activated element and keyboard popup isn't fired.
for checking which element is activated I used this code
document.body.addEventListener('click', function() {
console.log(document.activeElement);
});
Hope this helps.

I managed to resolve this by adding the following if you are still interested. Added a dummy control to take the focus then change the focus when clicking away from the text area.
$("body").click(function () {
$("#radioDummy").focus();
});
$("#MyTextArea").click(function (e) {
e.stopPropagation();
});

It seems the issue lies in the touchstart event when using the keyboard on Windows 10. When you hide the keyboard (e.g. pressing the close button (x) on the keyboard), the input field still has focus. And when you press anywhere else, the keyboard pops up again. However, pressing anywhere for a longer time (long press) will remove the focus from the input, and not show the keyboard again. This got me thinking, that the problem could be solved hooking up the touchstart event, and prevent the event propagation, and remove the focus from the input.
I created a global #HostListener inside my main AppComponent that listens for touchstart events. When the body is clicked, stop the propagation of the event, and call document.activeElement.blur() (Loose focus).
#HostListener('document:touchstart', ['$event'])
globalTouchEvent(event) {
if (event) event.stopPropagation();
document.activeElement.blur();
}
I have created a Stackblitz that you can test using a Windows 10 tablet.

What happens when an iPhone/iPad keyboard is shown/closed in Safari?

I'm trying to understand what happens after the "Done" button is clicked on the iPhone/iPad keyboard when viewing a webpage in Safari, specifically what events are fired.
From what I can gather so far, the text box that was selected loses it's focus.
Is this all that happens, or does the whole window lose it's focus?
I'm also interested to know if the showing of the keyboard causes any resize events to be fired?

touch equivalent of focus() method?

You can pass focus to an element in javascript as such:
element.focus()
I'm doing that with a input text box and it works fine. The input box gets focus and the cursor is in it.
We now want to also trigger the soft keyboard on touch devices. By default, putting focus on a field via JS will move the cursor into the field, but won't open the keyboard until the user physically taps on the field.
Is there a way to trigger a touch event (I'm guessing touchstart) akin to this:
element.touchstart()
That doesn't work, but hoping there is some method for this...
BTW, this is primarily for webkit. We're trying to get this working on an iPhone and BB Torch.

The event is ontouchstart instead of touchstart