关于禁用文本选择与复制的问题

样式如下
.test1 {
  user-select: none;
}
html 结构如下
<body>
<div 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>
</div>
</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);
});

发现还是会在单独选取时生效,但全部选取时就失败了,所以想问下有什么办法能够在可选取的节点中穿插不可选取的节点,还能使得全选复制时只选取到可选取的内容。

阅读 4k
2 个回答

这儿有个思路,就是你可以禁止ctrl+c的鼠标事件。
//禁止ctrl复制

document.onkeydown=function(){
    if((event.ctrlKey) && (window.event.keycode==67)){
          event.returnValue=false;
          alert("Ctrl+C被禁止啦!");
    }
}

如果全选有问题,也可以禁止ctrl+A

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题