javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > js+css实现登录后才能复制

js结合css实现登录后才能复制的效果实例

投稿：yin

很多网站都有登录后才能复制的限制，什么原理呢？css属性user-select:none，通常会采用这种方式来禁止复制文本。但浏览开发者工具-审查元素，取消此样式后，就可以选中文本了。想要完整地禁止复制，还需要通过js控制选择的内容。

很多网站都有登录后才能复制的限制，什么原理呢。？设置css属性user-select:none，此时鼠标无法实现选中文本，也就无法复制文本，通常会采用这种方式来禁止复制文本。但浏览开发者工具-审查元素，取消此样式后，就可以选中文本了。想要完整地禁止复制，还需要通过js控制选择的内容。

user-select：none

该属性用来控制用户能否选中文本。其对应常用的值：

none：元素及其子元素的文本不可选中。
auto：具体取值取决于一系列条件，具体如下：* 在 ::before 和 ::after 伪元素上，采用的属性值是 none* 如果元素是可编辑元素，则采用的属性值是 contain* 否则，如果此元素的父元素的 user-select 采用的属性值为 all，则该元素采用的属性值也为 all* 否则，如果此元素的父元素的 user-select 采用的属性值为 none，则该元素采用的属性值也为 none* 否则，采用的属性值为 text
text：用户可以选中文本。
all：当单击文本时，会选中这一行文本。

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;

jquery禁用

 禁用复制、粘贴、剪切

$(document).on("cut copy paste", function(e) {
        e.preventDefault();
});

 禁用右键

$(document).on("contextmenu", function(e) {
    e.preventDefault();
});

上述的代码只是阻止了浏览器自带的操作。如果用户想要复制、粘贴和剪切网页中的文本，依然可以通过浏览器菜单或使用快捷键来执行。

js屏蔽选中指定内容

window.addEventListener('copy',function(){
	const selection = window.getSelection();
	const copyNode = selection.getRangeAt(0).cloneContents();
}); 
const div = document.createElement('div');
div.appendChild(copyNode);
// 通过getComputedStyle获取style值，需要将节点挂载到dom树上，因此append到body
document.body.appendChild(div);
const nodelist = div.childNodes;
for (let i = 0; i < nodelist.length; i++) {
	const curnode = nodelist[i];
	const nodeType = curnode.nodeType;
	// 将节点类型为元素节点，并且设置了user-select:none的节点从复制的内容中过滤掉
	if (nodeType === 1 && window.getComputedStyle(curnode).userSelect === 'none') {div.removeChild(curnode);}
}
// 获取过滤后的数据
const cpt = div.innerHTML; 
selection.select(cpt); 
document.execCommand('copy');
//复制到剪切板

结论

到此这篇关于js结合css实现登录后才能复制的效果实例的文章就介绍到这了,更多相关js+css实现登录后才能复制内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

阅读全文