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

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?

Related

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

Closing keyboard takes to the top of the page safari

One my webpage I have a bootstrap model opened which has a form with two text boxes and few buttons. When I touch text box keyboard opens which is what I would expect but when I press done (on top of open keyboard) to close keyboard, safari on iPhone it scrolls all the way to the top of the page. This is causing model to loose focus and scroll events are being sent to underlying main page. So the question is, is there any way to get keyboard close event so that I can override this behaviour or any other way prevent it from happening. It's only happening on iPhone chrome and iPhone safari. It works fine on android chrome.

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.

Sencha Touch 2 iOS and textarea focusing, automatic scrolling

I have a <textarea> inside of an Ext.list in a web application that I'm viewing on iOS in a UIWebView.
When the <textarea> is focused and the keyboard is up, if I click anywhere in the UIWebView, then the <textarea> blurs and the keyboard moves down. Again, mobile safari does not do this, leading me to believe that this is behavior produced by Sencha Touch, and I would like to get rid of it. I'd like the user to be able to interace with web content while the keyboard is up.
I registered to event listeners - ontouchstart on the ext.list, and onbluron the <textarea>. The fact that, when the <textarea> is focused, if I click on ext.list, the ontouchstart fires before the onblur, I am lead to believe that UIWebView is not blurring the field, but something in Sencha Touch definitely seems to be also registering some sort of touch event and blurring it.
Essentially, I'd like to be able to remove whatever events sencha automatically installs to blur things, and handle it all myself. Sometimes I want to blur, sometimes I don't, depending on what is clicked.
So, what can I do?

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

Categories

Resources