javascript - 关于禁用文本选择与复制的问题
问题描述
样式如下.test1 { user-select: none;}html 结构如下
<body><p class='content'> <p class='test2'>111</p> <p class='test1'>222</p> <p class='test2'>333</p> <p class='test1'>444</p> <p class='test2'>555</p></p></body>
给其中的某几项做了禁用本文选择,单独对某一项选择时,确实能够禁用选择,其中的内容也无法复制,但是如果用cmd + a 进行全选时,会看到被禁用的项在页面上显示的是没有被选择,但此时内容能被复制下来。
接下来用 js 去控制:[].forEach.call(document.querySelectorAll(’.test1’), (node) => { node.addEventListener(’copy’, (e) => { e.stopPropagation(); e.preventDefault(); console.log(1); return false; }, true); node.addEventListener(’selectstart’, (e) => { e.stopPropagation(); e.preventDefault(); console.log(2); return false; }, true);});
发现还是会在单独选取时生效,但全部选取时就失败了,所以想问下有什么办法能够在可选取的节点中穿插不可选取的节点,还能使得全选复制时只选取到可选取的内容。
问题解答
回答1:可以换种思路,比如把文本放到css中。css中的文本就完全无法选中和复制了。随手写了个测试代码:
JsFiddle: https://jsfiddle.net/d95cugaL/
JsBin: http://jsbin.com/nowoxuceta/e...
或者再进一步,直接把文本放在图片上...
回答2:这儿有个思路,就是你可以禁止ctrl+c的鼠标事件。//禁止ctrl复制
document.onkeydown=function(){ if((event.ctrlKey) && (window.event.keycode==67)){ event.returnValue=false; alert('Ctrl+C被禁止啦!'); }}
如果全选有问题,也可以禁止ctrl+A
相关文章:
1. android - NavigationView 的侧滑菜单中如何保存新增项(通过程序添加)2. 老师 我是一个没有学过php语言的准毕业生 我希望您能帮我一下3. 编程学习心得分享(共80条)4. 关于thinkphp 5.1中,ajax提交数据url的格式写法,加花括号就出错,请老师指点5. php7.3.4中怎么开启pdo驱动6. tp5 不同控制器中的变量调用问题7. 提示语法错误语法错误: unexpected ’abstract’ (T_ABSTRACT)8. 这段代码既不提示错误也看不到结果,请老师明示错在哪里,谢谢!9. ueditor上传服务器提示后端配置项没有正常加载,求助!!!!!10. php - 一个操作请求多个服务如何保证数据的安全?
