如何使用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文件(主要是在副本上和在副本上)：