在Safari Mobile上以编程方式选择DOM元素（就像使用鼠标一样）？

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 (ie 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.

Answer 1

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.

Answer 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/