本文详细介绍如何利用JavaScript和CSS技术禁止网页内容的复制、粘贴及文本选择。通过jQuery绑定contextmenu、copy和selectstart事件,并拦截Ctrl+C/V快捷键,可有效防止用户复制。同时,结合CSS3的user-select属性及其浏览器前缀,从样式层面彻底禁用文本选中,实现多层次的网页内容保护。
JavaScript禁止复制与快捷键拦截
本文记录一种网页内容保护的技术方案。
具体实现代码如下:
主要功能是禁用右键菜单、复制操作以及文本选择功能。
$(document).bind("contextmenu copy selectstart", function() {
return false;
});
此外,还需禁用Ctrl+C和Ctrl+V快捷键,该方案在所有浏览器中均有效。
$(document).keydown(function(e) {
if(e.ctrlKey && (e.keyCode == 65 || e.keyCode == 67)) {
return false;
}
});
为了增强兼容性,还可以设置CSS禁止文本选择。如果已应用下方所述的CSS样式,则无需此段代码,因为新版浏览器已原生支持该功能。
$(function() {
$("body").css({
"-moz-user-select":"none",
"-webkit-user-select":"none",
"-ms-user-select":"none",
"-khtml-user-select":"none",
"-o-user-select":"none",
"user-select":"none"
});
});
CSS样式层面的文本选择禁用
为了应对用户禁用JavaScript的情况,建议将禁止选择的样式直接写入CSS文件中。这在新版浏览器中已得到支持,并正逐渐成为行业标准。
对应的CSS代码如下:
body {
-moz-user-select:none; /* Firefox私有属性 */
-webkit-user-select:none; /* WebKit内核私有属性 */
-ms-user-select:none; /* IE私有属性(IE10及以后) */
-khtml-user-select:none; /* KHTML内核私有属性 */
-o-user-select:none; /* Opera私有属性 */
user-select:none; /* CSS3属性 */
}
代码实现简单且功能实用。但需注意,在开放的互联网环境中,完全禁止复制并非总是值得推广的做法,请根据实际需求酌情使用。