Would like to programmatically select HTML within a DOM element, as if the user had selected with a mouse, precisely to avoid making them select with a mouse.
This bit of elegant code from SO post (Select all DIV text with single mouse click) works great on laptop browsers I tested (IE, Chrome, FF, Safari on Windows and Mac):
function selectText(el) {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(el);
range.select();
console.log("select 1");
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(el);
window.getSelection().addRange(range);
console.log("select 2");
}
else {
console.log("select 3");
}
};
JSFiddle: http://jsfiddle.net/z4yMh/7/
But does not work on Safari mobile (see JSFiddle). The mobile dev console shows he console shows select 2 indicating the click event is getting called, mobile dev console shows no error (i.e. the methods selectNode() don't seem to be null), just nothing happening.
Can't guess why. Googling is hard as select is also used to refer to a different concept jQuery/DOM selectors.
What I'm hoping for is an effect that's like native selection in Safari mobile, as in the picture here:
This project does not use jQuery, but if that solves the problem jQuery would be fine.
According to the CSS Ninja
When setting a range iOS Safari won’t actually show the selection as
highlighted but if you were to check the document selection it would
return the correct content, desktop browsers will show the range
selected in the document.
However if you do the same with a user action like tapping the “set
selection range” button in the demo the iOS highlight will show up.
Another interesting quirk is if I tap the content and bring the
keyboard up but don’t dismiss it then refresh the page the
programmatically set selection will show the iOS selection highlight.
Another interesting find is if you perform execCommand, which I’ll
touch on later in the article, like bold it will apply the command to
the selection made and make the iOS selection UI appear.
Hope this helps.
I agree with #nietonfir but I also updated the jsfiddle, a few times, to see how it would react.
The important point is to replace "click" with one of: touchstart, touchmove, touchend, touchcancel.
element.addEventListener('touchstart', function(e) {...});
See it in action here (minus the Mobile Safari selection UI):
http://jsfiddle.net/z4yMh/16/
Related
If I have an input element with type number trying to programmatically call the select() function on it won't work in Safari mobile .
When running this code
const el = document.querySelector(`#${FIELD1} input`);
if (el) {
setTimeout(() => {
el.focus();
el.select();
el.setSelectionRange(0, 9999);
}, 100);
}
The focus will work on all platforms, but the selection will only work in Chrome.
Is there any official info on this bug? Any way to go around it?
I tried el.setSelectionRange(0,99) as suggested in old posts but it seems to not work anymore (and it shouldn't as it's not in the W3C specs for that element).
PS: I'm using Preact.
EDIT: the problem is focused on iOS it actually works on Safari desktop.
I created a minimal reproduction: https://codesandbox.io/s/q86m6kv01q please try it navigating on your device to: https://q86m6kv01q.codesandbox.io/
Invoking the select picker UI on iOS requires a user gesture. This is done so that it's not possible to trigger system UI randomly (such as on page load).
When running http://ichord.github.io/At.js/ page in IE10, it works correctly in a sense it returns focus to textarea after selecting suggestion from autocomplete list. It also works when I use on screen keyboard and touch input (on surface rt or simulator).
When I try to run the same code as WinJs app, it works for mouse/keyboard selection, but when I select item using touch it doesn't return focus to textarea, which is really frustrating.
Is it known bug? Are there any known workarounds to it?
What it interesting it also doesn't hide on screen keyboard.
I'm developing simple form that generates piece of formatted text (you can take a look here). Idea is to simplify selection of created text. For desktop browsers following code with onсlick handler on div works great:
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById('template_text'));
range.select();
}
else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById('template_text'));
window.getSelection().addRange(range);
}
In mobile browsers (Android browser and Safari for iOS) this code just highlights div for a moment and nothing else. I don't want to create separate mobile version because it's only problem with the form.
Can text selection be simplified for mobile browsers in some way without affecting current functionality for desktop?
Thank you.
According to answer from this thread you can go to http://detectmobilebrowsers.com/ and download the script which will give you a tool of detecting whether it's mobile or desktop browser is used by visitor. Then you just branch your code with simple if and arrange mobile and desktop behaviors of selecting text separately in this particular place
In chrome or Safari browser, when I select the text on the page I can get the Selection-info by window.getSelection(), And it worked on iPad too.
But when I just click , in browser, I will get a window.getSelection (isCollapsed==true) with full infomation about the position and container . In iPad it just tell you the selection isCollapsed but the position info is 0 or null.
Anyone have an idea how to get the container and the position info when you click in iPad?
Basically using touch events you could do this. It is not just the selection but the number of the fingers you used too. It works on iPad on iPhones on almost every mobile. After setting your handlers for touch events you can map them easily to fire the click events or do something else.
I have a web application in which I have hooked mouse up and mouse down events; I use them for selection and manipulation of the graphical language for which my application is an editor. To prevent the right-click/context menu supplied by Firefox from showing up, I've placed:
if (evt.preventDefault) {
evt.preventDefault();
}
at the top of each of my mouse up and mouse down event handlers. I don't want to return false; I actually want the event to propagate.
On the Mac, the right-click menu doesn't show up; this is what I expect. On Windows, however, it stubbornly appears, even though Firebug confirms that my call to "preventDefault" is occurring and likewise "defaultPrevented" gets set to true.
Any idea what gives? Has anyone else run across this problem? I'm running Firefox 6.0.2 on both the Mac and Windows.
[Update: more recent versions of Firefox yielded consistent results on Mac and Windows: the context menu failed to be suppressed on both platforms.]
Okay. After putting this aside and returning to it several times, I finally found the solution.
Attempting to deal with the appearance of the context menu in the various mouse listeners appears to be fundamentally flawed. Instead, thanks to code I found here, I was put on the scent of the contextmenu event. That event appears to be the right way to handle things, although the code actually posted on that site didn't do the trick — merely calling "stopPropagation" and returning false was insufficient.
The following worked for me:
element.addEventListener('contextmenu', function(evt) {
evt.preventDefault();
}, false);
This has been tested with Firefox 10.0 on a Mac and Firefox 9.0.1 and 10.0 on Windows 7.
This option is removed in Mozilla's 23rd version.
Go to Tools > Options.
Go to the Content tab.
Click Advanced button next to Enable JavaScript option.
Disable or replace context menus. Check this box and it will magically work again.
There is no way to get around this setting in JavaScript.