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. docker内创建jenkins访问另一个容器下的服务器问题2. Whitelabel错误页面发生意外错误（类型=未找到，状态= 404）/WEB-INF/views/home.jsp3. html5 - h5写的app用的webview，用手机浏览器打开不显示？4. docker-compose 为何找不到配置文件？5. 用Java8的 stream 操作外部集合是否存在并发问题？6. docker容器呢SSH为什么连不通呢？7. docker gitlab 如何git clone？8. html5和Flash对抗是什么情况？9. css3 - 请问，如何写这个颜色的（渐变），并且在移动端自适应10. javascript - 移动端，当出现遮罩层的时候，遮罩层里有div是超出高度scroll的，怎么避免滑动div的时候，body跟随滑动？
网公网安备