Mobile Safari - Dismiss Keyboard with Javascript - javascript

I'm trying to dismiss the keyboard via JS in response to a button press, but I'm not having any luck.
Setup:
I have a textarea with accept and cancel buttons tied to it.
Upon clicking the cancel button, my view object will call textAreaElement.blur().
It will then remove the accept and cancel buttons.
Expected:
Field loses focus (visually and otherwise).
Keyboard is dismissed.
Actual:
Field appears to lose focus (visually, no cursor is displayed), and programmatically.
Keyboard is still presented.
I've already tried the usual Google but they all seem to think that calling blur on the focused element should be sufficient. One user even suggested calling $('input').blur() to ensure that all fields were blurred, but that didn't seem to make a difference.

... and I just figured out why this was happening.
I mentioned that I was removing the Accept and Cancel buttons for this field. Specifically the following was taking place:
Call textAreaElement.blur().
Animate the buttons disappearing.
Upon completion of the animation, buttons.remove().
When the Cancel button received the click, it gained focus (the keyboard remained active). When the Cancel button was subsequently removed in the animation completion callback, focus was applied to the previous focusable element, which is the textarea.
So I had the effect of doing:
textarea.blur() # Already doesn't have focus.
buttons.remove() # Removes buttons, applies their focus back to the textarea.
The solution was to instead:
Animate the buttons disappearing.
Wait for completion of the animation, buttons.remove().
Call textAreaElement.blur().

Related

How to handle focus and define ARIA roles

In the 1001st implementation of carousel I would like to "properly" handle the focus.
A few quick questions related to UI/UX of this component:
the arrows and the page navigation can accept focus if the TAB key is used. Should I keep the focus on the arrow button after a click event? Is it possible to do it wo calling element.focus() method - like pure HTML/CSS solution?
the page navigation area is suppose to handle the arrow keys inputs - the same question for it: Should I keep the focus once a page navigation button is pressed? Is it doable wo element.focus()? What should be ARIA role for this component?
the design requires 4px height navigation buttons - really hard to click on mobile. In order to make them useable, a div is added as a child of a navigation button so the height of click zone is extended to +20px. Is there better way to extend the "hot zone"?
how can I exclude the additional divs so as not to contribute to area of focus rectangle
Regarding focus, you ask if the focus can be kept on the buttons without using focus(). Absolutely. In fact, when you click on a button, the focus will not move unless you specifically move it or if the element you clicked on gets hidden. So if your desire is to leave the focus on the button, then you don't have to do anything.
That's the preferred behavior - leave the focus on the button. If I'm exploring the carousel slides and I'm a keyboard user, I will navigate/tab to the "next" button and press enter. I'll review the slide and if it's not what I want, I'll press enter again (assuming my focus remained on the "next" button) to see the next slide. If you force the focus to move away from the button and to the carousel content, then I have to navigate back to the "next" button before I can view the next slide. It can be annoying to have to keep navigating back to the element I just selected.
I don't understand your third or fourth questions.
Have you looked at the two W3.org references regarding carousels?
https://www.w3.org/TR/wai-aria-practices/#carousel
https://www.w3.org/WAI/tutorials/carousels/

Remove focus on Boostrap 5 toggle button after click

I am trying to work with the Bootstrap 5 Toggle Button (using the Outline Style for a more evident visual emphasis). However, the UX experience is not quite what I'm hoping for.
(See https://getbootstrap.com/docs/5.0/forms/checks-radios/#outlined-styles)
The toggle per se works well, its the focus (or after the click focus I should say) that's the problem. When the button is in an unchecked state, the visual clue is prominent since the button is outlined. When the button is in an checked state, again the visual clue is prominent because the button is filled. When the button transitions from an unchecked to checked state, the change is evident as it transitions from outlined to filled.
The problem is when unchecking. When the button transitions from a checked to unchecked state, the button remains filled until a) the mouse is moved on device with a cursor, or b) another location on the page is touched on a touch device. The user obviously believes that they have not unchecked the button when it has in fact been unchecked and then proceeds to continue to attempt to uncheck the button.
The problem is even more evident when dealing with multiple checkboxes in a button group.
(See https://getbootstrap.com/docs/5.0/components/button-group/#checkbox-and-radio-button-groups)
I have tried using javascript to call blur on the checkbox's click event, and although that approach has a limited degree of success, it does nothing on touch devices as the virtual pointer for the device remains hovering over the button. I also tried calling focus on a different element on the page with the same result.
Does anyone have any suggestions?
Was submitted for bugfix here: https://github.com/twbs/bootstrap/issues/34664

JavaScript: Swipe for Action Pattern Implementation

I have implemented the Swipe for Action Android pattern in my mobile web application (PhoneGap) using JavaScript & CSS animations/transitions.
However, there's one thing that's still eluding me.
I wish, that once the action menu is displayed fully and the user clicks anywhere outside of the action menu (labelled 3 in the figure), the menu should retract and the original item displayed (labelled 1 in the figure).
In a desktop application, one could "capture focus" and perform the transition back to (1) in lostfocus.
What is the JS equivalent of lostfocus event. I see an onfocus and onblur event, but from what I read it's really meant for things that need focus; like input, textarea, etc.
How else could I catch that event I'm interested in, other than putting some code in the touchend of every other element in the page and forcing the retraction of open actions explicitly?
I think you gave the answer yourself. focus and blur are the events to be used for this and they are not exclusively meant for input elements, as you can see here [1].
I'm even trigger the focus event manually in a layer use case: A layer opens and I want to capture the keypress of ESC to close the layer. For this I need to set the focus on the layer as my event handler would not fire otherwise.
To capture the click outside you just need to register for pointerUp or click events on an element that spans the whole screen (it must really cover the whole screen like the body element). Because of the event bubbling the handler will fire as long as nothing else captured and cancelled it.
[1] https://dvcs.w3.org/hg/dom3events/raw-file/tip/html/DOM3-Events.html#event-type-blur

KeyEvent target for Windows Firefox remains on hidden button

I have a div with several buttons in a form. When one of the buttons is clicked, this div is hidden and a new div is displayed. In my case, I am also having the button click trigger an ajax call for some data to populate the newly displayed div. The div that loads is a game that captures key events to allow the player to play.
In Firefox on Windows, I notice that all key events are being targeted at the button that was clicked on the first div, rather than at the body element. This means that the enter key re-clicks that button (restarting the game). If I disable the buttons when I switch divs, key events do not get triggered at all (making it unplayable).
What would a good strategy be to deal with this situation?
Not sure if this is an answer to my own question or a workaround, but it looks like I can call:
document.activeElement.blur()
I've added this to my button's onclick function and this seems to solve the problem.

Emulating "input clear" icon in iOS-targeted web app

Native iOS apps contain "clear buttons" in input fields. They clear the text while maintaining field focus.
I am developing a web app targeted specifically at iOS devices, and not having any luck emulating the behavior. If I overlay another element with a click event to clear & refocus the input, the iPad ignores the call to focus because it begins hiding the keyboard the instant the blur event fires on the input (before the click event). Therefore the user must manually re-focus the field after clicking the clear icon to get back the keyboard.
Is there any way to grab a touch event on the overlay image/icon without the soft keyboard deciding to vanish, or a better way to do this?
daxelrod's 2nd comment above led me to the solution: Trap the mousedown event on the clear icon, stop it, and clear the input. Thereby a "click" never occurs, and the input does not lose focus.
I thought that blur() fired at the browser level before any of the mouse events (down, up, click) did, so I didn't think to try it. Glad to see I was wrong!
In Mootools flavored JS:
document.id('inputClearImage').addEvent('mousedown', function (e) {
e.stop();
document.id('input').set('value', '');
});

Categories