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
– Gabriel C. Troia, Commented Dec 9, 2013 at 3:41
Good thought. The click event is getting called. Update the fiddle and post to verify that's the case. — prototype
– prototype, Commented Dec 9, 2013 at 5:14
@user645715 I updated the jsfiddle you created to show it in action. — Tom Pace
– Tom Pace, Commented Dec 9, 2013 at 5:36

nietonfir · Accepted Answer · 2013-12-09 05:01:50Z

2

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.

answered Dec 9, 2013 at 5:01

nietonfir

4,8916 gold badges34 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tom Pace Over a year ago

Good find! This is really useful to me.

prototype Over a year ago

Wow, how do you find links like that? Created 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.

Tom Pace · Accepted Answer · 2013-12-09 05:35:16Z

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 9, 2013 at 5:35

Tom Pace

2,3871 gold badge24 silver badges33 bronze badges

4 Comments

prototype Over a year ago

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?

Tom Pace Over a year ago

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?

prototype Over a year ago

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.

Tom Pace Over a year ago

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.

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Linked

Related