Can I clear the focus from a touched div on a mobile? - javascript

I have a page intended for desktop and mobile that has buttons allowing the user to touch and hold them to make adjustments. This jsfiddle illustrates the behaviour.
The problem is that on my Android phone, the div acting as a button gets highlighted with focus. It will then no longer respond to touch events until the focus has been taken away from it (by pressing another button) and going back to it.
Is is possible to clear or disable the focus of elements?

Would e.preventDefault be an option?

you can try $("#id").blur(), or simply focus on something else like $("#otherid").focus()

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

No click but only hover triggered on mobile touch-screen in browser

I have a web-app. There are some elements with the click event bound to them. It works fine on a desktop. But on a tablet when I touch the element it will first not do anything but instead just show that it's hovered with styles. And on the second click it works. How do I disable hover-on-touch and enable clicking on every first touch for the entire app?
These would also trigger on clicking the right mouse button. ---> this is :active state of the element
Maybe this link will help you:
iPad/iPhone hover problem causes the user to double click a link
(sorry, I'm not allowed to add comment yet)

How to detect the disappearing of the on-screen keyboard

Since the on-screen keyboard takes a lot of space on mobile devices, I would like to change the layout of a page of my website when the user selects a field to enter some information, and cancel these changes when the user leaves the field. Basically I want to hide some elements to save some space. I've tried to use the JavaScript "focusout" and "blur" events, but they don't work properly: a user might click on an area of the page, which would make the on-screen keyboard disappear, but the cursor would remain in the field and the "focusout"/"blur" event wouldn't be triggered. Is there any way to fix this?
Thanks

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.

Show keyboard when input is focused on web application

we are developing an application which is both mobile and desktop, when we use .focus() on the mobile version the keyboard is not showing up, we try by triggering a click within the focus function $('#numeroCheque').focus(function(){
$('#numeroCheque').trigger('click');
});
but still no keyboard is shown, does anyone faced this issue before, and what can we do to solve it. Thanks.
As I understand, you can't set the focus to an input element programmatically on mobile. There needs to be some kind of user interaction. If building out a Cordova application, you can disable this using the KeyboardDisplayRequiresUserAction setting in your config file. But that is only if you wish to wrap your application in Cordova.
ref: https://cordova.apache.org/docs/en/2.7.0/guide/project-settings/ios/
The other option is to set the input element attribute autofocus but even this I believe won't work on mobile either.
make sure your keyboard element has native support for keyboard interaction and that the element can receive keyboard focus across different platforms.
also make sure the tabindex attribute of .focus() is correct.
Focusing is not enough, you need a click event to trigger focus, and wait until the page is fully loaded.
$(document).ready(function() {
$('#numeroCheque').click(function(e){
$(this).focus();
});
});

Categories

Resources