srcmini本文概述
无论出于何种原因, 为什么要阻止选择文档中的文本, 使用轻松的CSS或Javascript即可轻松完成此任务。
CSS方式
CSS允许你使用用户选择规则轻松阻止选择。元素和子元素的文本将无法通过用户操作来选择。可以使用user-select：text在子元素上重新启用选择。以下类disable-select包含用户选择规则, 该规则带有每个浏览器上的所有可用前缀：
.disable-select {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by any browser but < IE9 */
}然后将类添加到要防止文本选择的任何元素中：
<p class="disable-select">
Hello, this text cannot by copied by the user action.
</p>jQuery方式
jQuery方法将从将unselectable属性添加到DOM元素开始。不可选择属性(仅在Internet Explorer中)指定用户无法选择元素。然后, 不仅使用Javascript, 而且使用CSS, 我们都将防止选择元素。第二条指令将添加user-select：none;如果没有Javascript(用户选择规则在IE9和更高版本中可用), 则该元素的css指令将是不可选择的。
最后, 我们将添加一个selectstart和dragstart侦听器以拒绝返回false的该事件, 你就可以开始了！
(function($){
$.fn.disableSelection = function() {
return this
.attr('unselectable', 'on')
.css('user-select', 'none')
.on('selectstart dragstart', false);
};
})(jQuery);或者, 你可以选择DOM元素并直接应用指令(与上述相同的指令), 而不是创建jQuery方法。
var element = $("#element");
element.attr('unselectable', 'on').css('user-select', 'none').on('selectstart dragstart', false);防止复制功能
如果你只需要防止元素的文本选择, 以防止用户在使用你的应用程序时犯错误, 那么任何上述解决方案都应该足够了。
但是, 如果此任务的主要目的是防止提取文本(复制文本功能), 这是网站上任何用户的常规操作, 则可以在文档中禁用此事件, 将以下属性添加到HTML文件(主要是在副本上和在副本上)：
<body oncopy="return false" oncut="return false" onpaste="return false">或使用jQuery阻止事件的执行：
$('body').on('copy', function(e) {
e.preventDefault();
return false;
});但是你需要知道, 不可能以任何方式(100％安全)阻止提取文档中的文本, 因为有很多方法可以检索网站内容, 即浏览器中的Developers Console：
此外, 要使文本提取更加困难, 你可以提供内容的图像, 而不是在文档中提供文本。
这将使文本不可复制。但是, 你的内容也不安全, 因为有人可以使用OCR(光学字符识别)来提取图像中的文本。
玩得开心 ！
评论前必须登录！
注册