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

 更新时间:2023年07月15日 16:14:25   投稿: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实现登录后才能复制内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS中国标准时间转化为年月日时分秒'yyyy-MM-dd hh:mm:ss'的示例详解

    JS中国标准时间转化为年月日时分秒'yyyy-MM-dd hh:mm:ss'的示例详解

    这篇文章主要介绍了JS中国标准时间转化为年月日时分秒‘yyyy-MM-dd hh:mm:ss‘的相关知识,通过示例代码介绍了,Js各种时间转换问题(YYYY-MM-DD 时间戳 中国标准时间),需要的朋友可以参考下
    2024-02-02
  • js实现上传图片预览方法

    js实现上传图片预览方法

    这篇文章主要为大家详细介绍了js实现上传照片预览的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • JS判断字符串是否为整数的方法--简单的正则判断

    JS判断字符串是否为整数的方法--简单的正则判断

    今天小编就为大家分享一篇JS判断字符串是否为整数的方法--简单的正则判断,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-07-07
  • 深入剖析JavaScript面向对象编程

    深入剖析JavaScript面向对象编程

    下面小编就为大家带来一篇深入剖析JavaScript面向对象编程。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • javascript实现网页字符定位的方法

    javascript实现网页字符定位的方法

    这篇文章主要介绍了javascript实现网页字符定位的方法,实例分析了javascript页面元素查找与定位的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • javascript 关于赋值、浅拷贝、深拷贝的个人理解

    javascript 关于赋值、浅拷贝、深拷贝的个人理解

    关于赋值、浅拷贝、深拷贝,以前也思考良久,很多时候都以为记住了,但是,我太难了。今天我特地写下笔记,希望可以完全掌握这个东西,也希望可以帮助到任何想对学习这个东西的同学
    2019-11-11
  • uniApp常见面试题及答案(推荐!)

    uniApp常见面试题及答案(推荐!)

    uni-app是一个使用Vue.js开发所有前端应用的框架,下面这篇文章主要给大家介绍了关于uniApp常见面试题及答案的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • Stop SQL Server

    Stop SQL Server

    Stop SQL Server...
    2007-06-06
  • js中对象与对象创建方法的各种方法

    js中对象与对象创建方法的各种方法

    这篇文章主要给大家介绍了关于js中对象与对象创建方法的各种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-02-02
  • JavaScript中Promise的使用方法实例

    JavaScript中Promise的使用方法实例

    现在不会用Promise都不好意思说自己是前端,下面这篇文章主要给大家介绍了关于JavaScript中Promise使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05

最新评论