如何使用CSS和jQuery禁用文档中的文本选择

本文概述

CSS方式
jQuery方式
防止复制功能

无论出于何种原因, 为什么要阻止选择文档中的文本, 使用轻松的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(光学字符识别)来提取图像中的文本。

玩得开心！

本文概述

CSS方式

jQuery方式

防止复制功能

猜你喜欢