本文概述
- CSS方式
- jQuery方式
- 防止复制功能
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禁用文档中的文本选择】玩得开心 !
推荐阅读
- 如何在Windows的XAMPP中使用cmd提示符导入mysql数据库
- 如何使用自己的logo创建自定义加载栏
- 如何使用TinyMCE和Prism.js添加代码段
- 如何解决Xampp错误(启动Apache时,另一个应用程序(Skype)正在使用端口80)
- 如何创建与Skype交互的HTML链接(通话,聊天,查看个人资料,添加到联系人)
- HTML5 Accesskey属性(你可能不需要JavaScript即可添加键盘快捷键)
- Webpack无效的主机标头(无法从LAN访问Webpack开发服务器)
- 如何在NetBeans中轻松地将文件路径和目录路径复制到剪贴板
- Android EditText android(文字无效)