如何在 Webkit 浏览器中仅（且仅）选择部分页面答案

【问题标题】：How to make selectable only (and only) the part of page in Webkit browsers如何在 Webkit 浏览器中仅（且仅）选择部分页面
【发布时间】：2018-06-22 11:05:55
【问题描述】：

我可以使用user-select CSS 禁用页面上的选择开始，如question 的答案中所述。并在特定元素上启用它，如here 所述。

但是我不知道如何在选择开始时强制WebKit WebView不允许选择“不可选择的”元素，该选项设置为可选择。这是 WebKit 可以选择文本的代码示例，文本不应该是可选的：

    <html><head> 
    <style type="text/css">           
    body {
      -webkit-user-select: none;
      user-select: none;
    } .selectable {
      -webkit-user-select: text;
      user-select: text;
    }</style>   
    </head>
    <body>
      <p class="selectable">You should be able to select this text.</p>
      <p>Hey, you can't select this text!</p>
      <p class="selectable">You should be able to select this text.</p>
      
      <textarea rows="5"></textarea>
</body></html>

Here 直播了吗？在 iOS 8 Safari 中运行会发生这种情况：

您可以看到它 - 不仅选择了整个文本，而且还复制了它。这种行为在 Android Chrome 58 和桌面 Chrome 63 上是相同的（区别只是突出显示了可选择的文本），所有内容也被复制。它在 Firefox 中的工作方式有所不同，正如我所期望的那样，突出显示和复制的只是可选择的文本。

那么有可能使选择受这些可选元素的限制吗？

感谢您的回复。

【问题讨论】：

标签： html ios css cordova webkit

【解决方案1】：

我不认为只有 css 可以帮助你。

我使用Selection API 整理了一个肮脏的解决方案，部分代码请借自here

在复制事件中，剪贴板中的文本会从不应选择的文本中转义，然后放回剪贴板中。

必须以某种方式标记不可选择的文本，在我的示例中，我使用了“noselect”类。

请检查浏览器对 Selection API 的支持。

  

      <html>
<head>
  <style type="text/css">
    body {
      -webkit-user-select: none;
      user-select: none;
    }

    .selectable {
      -webkit-user-select: text;
      user-select: text;
    }
  </style>
</head>

<body>
  <p class="selectable">You should be able to select this text.</p>
  <p class="noselect">Hey, you can't select this text!</p>
  <p class="selectable">You should be able to select this text.</p>

  <textarea rows="5"></textarea>
  <script>
    (()=>{
      const getTextToEscape = selector => [...document.querySelectorAll(selector)].map(node=>node.innerHTML)
      const escapeText = escapes => text => escapes.reduce((acc, escape)=>text.replace(escape, ''), text)

      const textToEscape = getTextToEscape('.noselect')
      const escapeHTML = escapeText(textToEscape)

      document.addEventListener('copy', e => {
        // We need to prevent the default copy functionality,
        // otherwise it would just copy the selection as usual.
        e.preventDefault();
        // The copy event doesn't give us access to the clipboard data,
        // so we need to get the user selection via the Selection API.
        var selection = window.getSelection().toString();
        // Transform the selection in any way we want.
        // In this example we will escape HTML code.
        var escaped = escapeHTML(selection);
        // Place the transformed text in the clipboard. 
        e.clipboardData.setData('text/plain', escaped);
      })
    })()
  </script>
</body>

</html>

【讨论】：