Prevent text selection on tap and hold on iOS 13 / Mobile Safari - javascript

Tapping and holding on a DIV causes Safari to select (i.e. highlight) the surrounding text and the phone to vibrate, even if this DIV has a user-select property set to none. This is very annoying in the context of my app. It seems to be specific to iOS 13 and its Haptic Touch.
I tried to e.preventDefault() on the touchstart event and it worked, but at the same time disabled scrolling capabilities.
I also tried to e.preventDefault() on the webkitmouseforcewillbegin event, as recommended in the Apple documentation, but this didn't work at all.
Anyone knows how to fix this?
Video: https://youtu.be/SstDm0M8RN0

Calling event.returnValue = false; from all touch events (touchstart, touchend, touchmove, touchcancel) prevents from the surrounding text selection.
Here is fiddle: https://jsfiddle.net/j_u_l_e_e/yLdt1s4o/

Related

Javascript/JQuery - Controlling the iOS keypad

Based on my previous post where I attempt to fire off an event before the keypad opens on iOS, I am using the "touchstart" option to fire off an event.
Fire Event before 'focus' kicks in / Fire Event before keyboard appears on iOS
This works great, but when the device is slightly delayed the touchstart doesn't fire quick enough before the blur so the keyboard appears before the code is fired which is a major issue (we are working around the position: fixed;) issue.
My question is this:
Is there any way to control the keypad? Adding a timer or anything (even a code break) on the touchstart doesn't stop the keypad appearing on blur (when the touch is removed).
Thank you!

Jquery touchend firing before finger is released

I want to do Two things...do something when we touch the screen and when we release finger from screen..But touchend function below triggers alert box even before i release my finger.Where i am wrong ?
$(window).on('touchend', function(e){
alert("finger released");
});
$(window).on('touchstart', function(e){
//touch started
});
This is actually a known bug in webkit. Try to use touchmove instead if it suits your needs, or touchcancel is sometimes fired in place of touchend. BTW it works fine on Firefox (on Android at least, I don't even know if FF exists on iOS).
EDIT
What you can do also is playing around with preventDefault(); on the touchstart event, but as it said by it's name, it prevents the default behavior, so once again, it depends on your needs.

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

Google Chrome cancel up and down arrow events

I'm making an AutoSuggest widget for a website, which works in the way that when an user writes something in input text box the div with suggestions is displayed and an user can navigate through it by mouse or by up and down arrows. Each word is suggested separately (not like in Google suggest where it looks on the whole phrase.
I have a problem with Google Chrome input box as when I'm pressing up or down arrow there is a default behaviour of browser - jump with carret to the end or beginning of the text box (like with Home or End buttons). There is no such effect on Firefox or Internet Explorer. How could I disable this effect?
I'm returning 'false' from the event handler function and also used a function from here http://www.javascripter.net/faq/canceleventbubbling.htm but still carret is jumping on Chrome...
Edit: same effect on Safari...
Have you tried preventing the default behavior?
window.addEventListener('keydown', function(e) {
e.preventDefault();
...
}, false);
Not exatly a true solution for a question but I've done a workaround by using this functions
http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea/
and catching the carret position before event (or not exatly before as when keydown event is fired the carret is still on good position) and then setting it back after event.

Categories

Resources