Programmatically select DOM element (as if with mouse) on Safari Mobile?

Question

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:

enter image description here

This project does not use jQuery, but if that solves the problem jQuery would be fine.

I guess is not working on Safari Mobile because of the differences between click and touch. — Gabriel C. Troia, Dec 09 '13 at 03:41
Good thought. The click event is getting called. Update the fiddle and post to verify that's the case. — prototype, Dec 09 '13 at 05:14
@user645715 I updated the jsfiddle you created to show it in action. — Tom Pace, Dec 09 '13 at 05:36

score 2 · Accepted Answer · answered Dec 09 '13 at 05:01

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.

Wow, how do you find links like that? Created http://jsfiddle.net/z4yMh/19/ per this and @Tom Pace 's . The event is getting called, it seems to just be not highlighting the selection. Can't quite seem to find the object to call `execCommand` on. The only thing that seems to have that method is `document` but the display is not responding. I'm crashing now but back on this in daylight. — prototype, Dec 09 '13 at 05:50

score 2 · Answer 2 · answered Dec 09 '13 at 05:35

2

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/

answered Dec 09 '13 at 05:35

Tom Pace

2,347
1
24
32

Fascinating. On my ipad, the `'click'` event was enough to enable to trigger the event, and so I assume for your device `click` was not working and required the `touchstart`? – prototype Dec 09 '13 at 05:46
1

The click event had no effect in mobile safari on my iPhone, iOS 6. I've done a lot of mobile safari work using css transforms with the touches and animation. The click event has never worked, I find it interesting you had success with it on iPad. What iOS version? – Tom Pace Dec 09 '13 at 05:48
Possibly. Does the code select the div on your machine? If so, that's a definite yes. I still can't get Safari to programmatically select the DIV once the event is triggered (the primary goal). But I do greatly appreciate your tremendous help on adding the 'touchstart' (the next problem I would have faced). Strangely, click does work on my ipad ios 6.1.3. Added a +1. That's not even close to justice though. – prototype Dec 17 '13 at 02:54
1

Yes, on my iPhone (very hard to work with jsfiddle on iPhone!) the div was selected according to window selection ranges. But the visual part, what is supposed to appear when you long-press on something usually, and get the Select/Select All pop-up, that doesn't appear with stability. Various places online say Mobile Safari is buggy and inconsistent with that. – Tom Pace Dec 18 '13 at 16:40

Programmatically select DOM element (as if with mouse) on Safari Mobile?

2 Answers2