简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 关于禁用文本选择与复制的问题
为情所困
为情所困 2017-06-26 10:58:49
0
2
759
样式如下
.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);
});

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

为情所困
为情所困

全部回复(2)
为情所困
为情所困2017-06-26 11:00:49 2 楼

可以换种思路，比如把文本放到css中。css中的文本就完全无法选中和复制了。随手写了个测试代码：

JsFiddle: https://jsfiddle.net/d95cugaL/

JsBin: http://jsbin.com/nowoxuceta/e...

或者再进一步，直接把文本放在图片上...

点赞 +0
添加回复
我想大声告诉你
我想大声告诉你2017-06-26 11:00:49 1 楼

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

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

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

点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！