让图文不可复制、转载注明出处

最新推荐文章于 2025-01-17 15:03:20 发布

转载最新推荐文章于 2025-01-17 15:03:20 发布 · 350 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/shinehouse/articles/4001742.html

html 专栏收录该内容

25 篇文章

订阅专栏

本文介绍如何使用CSS3的user-select属性防止网页内容被用户选择和复制，探讨其在版权保护及用户体验间的平衡，并指出其在HTML5 DragandDrop技术中的应用。

让图文不可复制

-webkit-user-select: none; 
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;

user-select简介

这是在css3 UI规范中新增的一个功能，用来控制内容的可选择性

user-select:值

auto——默认值，用户可以选中元素中的内容
none——用户不能选择元素中的任何内容
text——用户可以选择元素中的文本
element——文本可选，但仅限元素的边界内(只有IE和FF支持)
all——在编辑器内，如果双击/上下文点击发生在子元素上，该元素的最高级祖先元素将被选中。
-moz-none——firefox私有，元素和子元素的文本将不可选，但是input输入框中的文字除外（IE浏览器下是通过onselectstart="javascript:return false;"事件来实现该功能的）

结语
这个属性，在之前是被用来保护网站的内容，不被用户复制和转载，从而保护资讯的版权，但是这样却对普通用户的用户体验造成了伤害，而且，并不能真正的保护页面中的内容，通过查看源代码其实也可以复制。。。
现在，HTML5蒸蒸日上，很多网站或者web app会使用到Drag and Drop技术，user-select正好在一些情境中可以用到。

转载注明出处

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
    <style>
  
    </style>
</head>
<body>
    <div class="copy-text">
        <p>
        <textarea cols="12" rows="10">
            wqeqw
        </textarea
            >
        </p>
        <p>这是一段文字</p>
        <p><input type="text" value="1111" /></p>
        <p><button>安装</button></p>


 
</body>
<script>
     function addLink() {
        var body_element = document.getElementsByTagName('body')[0];
        var selection;
        if (window.getSelection) {//表示用户选择的文本范围或光标的当前位置。
            selection = window.getSelection();
            console.log(selection)
            // alert("文字复制成功！若有文字残缺请用右键复制\n转载请注明出处：" + document.location.href);
 
        } else if (document.getSelection) {//IE10
            selection = document.getSelection();
            alert("文字复制成功！若有文字残缺请用右键复制\n转载请注明出处：" + document.location.href);
 
        } else if (document.selection) {//IE6+10-
            selection = document.selection.createRange().text;
            alert("文字复制成功！若有文字残缺请用右键复制\n转载请注明出处：" + document.location.href);
        } else {
            selection = "";
            alert("浏览器兼容问题导致复制失败！");
        }
        var pagelink = "<br /><br /> 转载请注明来源: <a href='" + document.location.href + "'>" + document.location.href + "</a>";
 
        var copy_text = selection + pagelink;
        var new_div = document.createElement('div');
 
        new_div.style.left = '-99999px';
        new_div.style.position = 'absolute';
 
        body_element.appendChild(new_div);
        new_div.innerHTML = copy_text;
 
        selection.selectAllChildren(new_div);
 
        window.setTimeout(function () {
            body_element.removeChild(new_div);
        }, 0);
    }
 
  
    document.body.oncopy = addLink;


</script>
</html>

复制后粘贴结果
在这里插入图片描述