如何在 Webkit 浏览器中仅（且仅）选择部分页面
Posted
技术标签:
【中文标题】如何在 Webkit 浏览器中仅（且仅）选择部分页面【英文标题】：How to make selectable only (and only) the part of page in Webkit browsers 【发布时间】：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 中的工作方式有所不同，正如我所期望的那样，突出显示和复制的只是可选择的文本。
那么有可能使选择受这些可选元素的限制吗？
感谢您的回复。
【问题讨论】：
【参考方案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>【讨论】：
以上是关于如何在 Webkit 浏览器中仅（且仅）选择部分页面的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 django ORM 在 postgres 中仅选择日期部分
如何在iOS，Objective C的tableview中的每个部分中仅实现单个单元格选择