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

Question

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

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

将手指放在标题中的“欢迎”一词上，它将只选择该词。通过将手指放在第一个文本部分(“Stack Overflow 是一个问答网站...等”)中的“问题”一词上，您将无法选择该词，因为它会选择整个文本 block 相反。

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

一些文本行。在左侧站点的下方，我们有一个小文本(在单独的 div 中)和右侧的文本代码(也在单独的 div 中)。这些元素周围有一个容器，否则我们将无法创建特定标记。

当我们尝试选择该文本代码时，它会选择整个容器。但是:如果我们放大，我们可以选择更具体的元素(但仍然不是我们想要的)。

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

Answer 1

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

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

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

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

你可以看看这个solution