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

【问题标题】：Programmatically select DOM element (as if with mouse) on Safari Mobile?在 Safari Mobile 上以编程方式选择 DOM 元素（就像用鼠标一样）？
【发布时间】：2013-12-26 01:52:50
【问题描述】：

希望以编程方式在 DOM 元素中选择 HTML，就像用户用鼠标选择一样，正是为了避免让他们用鼠标选择。

来自 SO 帖子 (Select all DIV text with single mouse click) 的这段优雅代码在我测试过的笔记本电脑浏览器（IE、Chrome、FF、Windows 和 Mac 上的 Safari）上运行良好：

    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/

但不适用于 Safari 移动版（请参阅 JSFiddle）。移动开发控制台显示他的控制台显示select 2 表示点击事件被调用，移动开发控制台显示没有错误（即方法selectNode() 似乎不为空），只是没有发生任何事情。

不知道为什么。谷歌搜索很困难，因为 select 也被用来指代不同的概念 jQuery/DOM 选择器。

我希望的是一种类似于 Safari 移动设备中的原生选择的效果，如下图所示：

这个项目没有使用 jQuery，但是如果能解决问题 jQuery 就可以了。

【问题讨论】：

我猜由于点击和触摸之间的差异，无法在 Safari Mobile 上运行。
好主意。点击事件被调用。更新小提琴并发布以验证情况是否如此。
@user645715 我更新了您创建的 jsfiddle 以显示它的实际效果。

标签： javascript select

【解决方案1】：

根据CSS Ninja

当设置一个范围时，iOS Safari 实际上不会将选择显示为突出显示，但如果您要检查文档选择，它会返回正确的内容，桌面浏览器将显示范围在文档中选择。

但是，如果您对用户操作执行相同操作，例如点击“设置演示中的“选择范围”按钮，iOS 突出显示将显示。另一个有趣的怪癖是，如果我点击内容并将键盘向上但不要关闭它然后刷新页面以编程方式设置选择将显示 iOS 选择突出显示。

另一个有趣的发现是，如果你执行 execCommand，我会稍后在文章中触摸，像粗体一样它将命令应用于所做的选择并显示 iOS 选择 UI。

希望这会有所帮助。

【讨论】：

好发现！这对我来说真的很有用。
哇，你怎么找到这样的链接？根据此创建 jsfiddle.net/z4yMh/19 和 @Tom Pace 的。该事件被调用，它似乎只是没有突出选择。似乎无法找到调用execCommand 的对象。唯一似乎有这种方法的是document，但显示没有响应。我现在崩溃了，但在白天又回来了。

【解决方案2】：

我同意@nietonfir，但我也更新了几次 jsfiddle，看看它会如何反应。

重点是将“click”替换为以下之一：touchstart、touchmove、touchend、touchcancel。

element.addEventListener('touchstart', function(e) {...});

在此处查看实际操作（减去 Mobile Safari 选择 UI）：

http://jsfiddle.net/z4yMh/16/

【讨论】：

令人着迷。在我的 ipad 上，'click' 事件足以触发事件，因此我假设您的设备 click 无法正常工作并需要 touchstart?
点击事件在我的 iPhone iOS 6 上的移动 safari 中没有影响。我已经使用 css 转换与触摸和动画完成了很多移动 safari 工作。 click 事件从未起作用，我发现你在 iPad 上成功使用它很有趣。什么 iOS 版本？
可能。代码是否选择了您机器上的 div？如果是这样，那是肯定的。一旦触发事件（主要目标），我仍然无法让 Safari 以编程方式选择 DIV。但我非常感谢您在添加“touchstart”（我将面临的下一个问题）方面的巨大帮助。奇怪的是，click 确实适用于我的 ipad ios 6.1.3。添加了+1。不过，这甚至还没有接近正义。
是的，在我的 iPhone 上（很难在 iPhone 上使用 jsfiddle！），div 是根据窗口选择范围选择的。但是视觉部分，当你通常长按某个东西时应该出现什么，并得到选择/全选弹出窗口，它并没有稳定地出现。网上很多地方都说 Mobile Safari 有问题并且与此不一致。
非常感谢，很高兴知道这一点。