某些文本必须在 ipad 上可选择，但不是

Question

我的问题是关于包含人们需要能够复制粘贴的某些代码的网站。 我无法发布该示例的链接，因为我正在为客户工作。那是不合适的。不过，我可以使用 StackOverflow 来解释问题：

请在 iPad 2 或 3 上查看以下 URL：https://stackoverflow.com/tour 为此请使用 Safari 浏览器。

将手指放在标题中的“欢迎”一词上，它将仅选择该词。 通过将手指放在第一个文本部分中的“问题”一词（“Stack Overflow 是一个问答网站...等”），您将无法选择该词，因为它将选择整个文本块而是。

现在在这种情况下可能没问题。但我需要知道它背后的逻辑。我遇到的问题是我们有：

一些文本行。在左侧站点的下方，我们有一个小文本（在单独的 div 中）和右侧的文本代码（也在单独的 div 中）。 这些项目周围有一个容器，否则我们将无法创建某些标记。

当我们尝试选择该文本代码时，它将改为选择整个容器。 但是：如果我们放大，我们可以选择更具体的项目（但仍然不是我们想要的）。

有没有人知道如何解决这个问题？我们是否必须摆弄 z-index 或其他什么？

Answer 1

我不确定这是否是与 CSS 相关的问题。不看实际页面很难判断。

-webkit-user-select: none; 控制当前元素的文本选择。
但是正如您在放大时提到的那样，您可以选择，所以它可能与 CSS 无关。

不幸的是，我没有 Ipad 来测试它，但我可以建议另一种方法，即添加一个按钮/锚点和单击事件以将 textarea 的内容复制到剪贴板...
由于安全问题，并非所有浏览器都支持，但有许多解决方法/插件。在 IE 中你可以这样做：

function copy (text)
{
window.clipboardData.setData('Text',text);
}

你可以看看这个solution