如何使用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:
如何使用CSS和jQuery禁用文档中的文本选择

文章图片
此外, 要使文本提取更加困难, 你可以提供内容的图像, 而不是在文档中提供文本。
这将使文本不可复制。但是, 你的内容也不安全, 因为有人可以使用OCR(光学字符识别)来提取图像中的文本。
【如何使用CSS和jQuery禁用文档中的文本选择】玩得开心 !

    推荐阅读