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

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', '');
});

Related

How to prevent focus change on long press in Chrome on Android?

I want focus to stay on the currently focused DOM element. I am using the usual way to prevent focus change on click on another element:
button.addEventListener("mousedown", (evt)=>{evt.preventDefault();});
This works on normal clicks, but not on long press.
I expected it to work on long press too. Anyone knows if the behavior is a bug?
Is there any way to prevent focus change on long press?
Listen to the touchstart event:
element.addEventListener("touchstart", (evt)=>{evt.preventDefault();});
Note that you will still need the mousedown event listener for non-touch devices.

How can I focus on a text input without showing on-screen keyboard

I'm making a chat service, and I want to support mobile devices well.
On a screenshot below, there is an input field. It allows typing text, and to avoid issues like "if the text field is unfocused typing does nothing" it automatically gets focused when clicking outside of it - this does improve the experience on desktop computers. However, on devices with software keyboard, this causes on-screen keyboard to appear on mobile devices which is distracting.
Considering clicking anywhere focuses the text input, is it somehow possible to make on-screen keyboard only appear when the text field is pressed? Or alternatively, somehow detect devices with software keyboard enabled and disable this feature for them. Preferably without explicitly trying to detect mobile devices, touch screen or whatever as there exist touch screen devices with hardware keyboards.
This issue I was able to reproduce in Google Chrome and Opera Mobile on Android, and apparently it happens on iPhones, although I have no device to test it on.
Here is a rather simple example of an issue. If you touch the pink rectangle, it will cause touch keyboard to appear, which I don't want.
<input type=text id=f>
<div style="background: pink; height: 200px; width: 200px" onclick="f.focus()">
The short answer is that this is a built in function and you can't stop it, but there are a couple of options to consider.
1) use the onFocus event to immediately trigger the blur event to hide the keyboard again.
2) set readonly="true" on the element, later remove it and trigger the focus event.
3) create a fake input element with div's and css, when you want to trigger the keyboard focus on a hidden input field and copy out the value of the input on the keyup event as the user types.
Hope these suggestions were helpful to you.
If I got this right, you may also consider to change the logic of focusing the textfield when there is a click "anywhere". On touch-devices the touch events get dispatched first and you can cancel the click-handling (look for preventDefault(), return false; or stopPropagation() which should be called in you touch event handler).
You will need another event listener which handles the touch events outside the textfield, e.g. "touchstart".
If you want to keep the ui effect of a focused textfield, just add a css class "focused" to the textfield by script instead of using textfield:focused{} for your styles.

Prevent blur event on keyboard close

This is for mobile web apps, not native.
I have an autocomplete drop-down that closes on the blur event. But I want to prevent this from happening when the user closes the keyboard on mobile (ie the autocomplete dropdown should stay visible). Is there a way to distinguish a blur event caused by the keyboard closing, and other kinds of blur events? Can I prevent a blur event specifically caused by closing the keyboard in mobile?
Ok, first I would recommend checking your libraries' documentation because they might provide something in their API, although there's nothing I'm aware of. That's the disadvantage of Web Apps: you can't access native functionality.
If you still really want to do it, here's a possible solution. It's ugly, but it might work.
Container on tap function (event)
If !autocomplete return // if you cant see the popup do nothing and blur normally
If (event.target != inputID) AND (event.target != autocID)
CloseAutocomplete()`
Essentially, instead of closing the autocomplete on blur, close it whenever the user taps on your parent container, but not on the input itself or the autocomplete. Depending on how it works, you could extend it to check any tap on screen.
I see you tagged iOS... you can observe keyboard events with UIKeyboardWillHideNotification. [https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIWindow_Class/index.html#//apple_ref/c/data/UIKeyboardWillHideNotification] You may have to do and asynchronous delay to catch that event on with onblur, though.
If you really want to prevent all "other kinds of blur events" you could make your drop-down close on specific events (instead of on blur). For example: when a another field is clicked, navigation, and/or add an 'x' close button next to that drop-down control.
In the blur event listener, test for event.relatedTarget === null. If focus has moved to a different element, event.relatedTarget will refer to that element, but if there is no focus (as is the case when the cause of the blur is keyboard close), event.relatedTarget will be null.

How to handle differences in iOS and Android Keyboard

For HTML/JS in mobile browsers, I'm having an issue where blur events trigger differently in iOS and Android. In iOS, a user can click on "Done" on the native keyboard, which hides the keyboard and causes the focused element to blur.
The same, however, does not happen when a user clicks the back icon in Android to hide the native keyboard; The elements that were previously focused keep their focus.
Is there a way to listen for the keyboard hiding and trigger a blur on the focused element? Or is there a way to force the Android keyboard to display a "done" button? Or is there a generally better solution?
Maybe a solution would be to listen to the keydown event on the input, and check if the keypress is "Enter".
To do that, please refer to this :
Enter key press event in JavaScript

textarea change dom event that works without losing focus, for example for pasting using a mouse

I am creating a web page for translating texts piece-by-piece. The user is supposed to fill many textareas and press the "save" button when done. The save button is inactive by default, and becomes active on keypress, keyup, and keydown. This, however, doesn't cover the case when text is pasted using a mouse, by right-clicking and pressing "Paste" or by middle-clicking (middle-click pasting is common in X Windows). This pasting scenario is relatively common on the web page that I am creating.
The "change" event would work, but it's only fired after the textarea loses focus. Is there a way to get that mouse pasting event to be triggered immediately when the text changes?
Thank you!
$("textarea").on("change keyup keydown paste cut copy", function(e) {
// do something
});
You can attach any event, you want to. Cut, Copy and Paste. I added all of them!

Categories