javascript - 关于禁用文本选择与复制的问题
本文介绍了javascript - 关于禁用文本选择与复制的问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
样式如下
.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);
});
发现还是会在单独选取时生效,但全部选取时就失败了,所以想问下有什么办法能够在可选取的节点中穿插不可选取的节点,还能使得全选复制时只选取到可选取的内容。
解决方案
可以换种思路,比如把文本放到css中。css中的文本就完全无法选中和复制了。随手写了个测试代码:
JsFiddle: https://jsfiddle.net/d95cugaL/
JsBin: http://jsbin.com/nowoxuceta/e...
或者再进一步,直接把文本放在图片上...
这篇关于javascript - 关于禁用文本选择与复制的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文