Js 复制内容到剪贴板

发表于 | 更新于: | 分类于 ， | 阅读次数:
字数统计: 2,297 | 阅读时长 ≈ 9

A：安全，execCommand，选中；
B: 库的使用不是很明白（没有用过）；使用过程中的坑，不错。
C: 还有禁止复制的时候;包括反复制。

2018.4.15 10:15 星期日

# A [如何用20行JS代码实现粘贴板功能]

一 关于剪贴板的安全

几年前，浏览器不可能直接使用剪贴板。开发人员不得不通过Flash来实现。

剪贴板看起来无关紧要，但想象一下，如果浏览器能够随意查看和操作内容，会发生什么。JS脚本（包括第三方脚本）能查看剪贴板内的文本信息，并将密码，敏感信息甚至整个文档发送到远程服务器。

现在的剪贴板基本功能有限，有如下限制：

  1. 大多数浏览器支持剪贴板，除了Safari。(译注，Safari其实已经支持)
  2. 支持因浏览器而异，有些功能不完整或有问题。
  3. 事件必须由用户必须发起，如点击鼠标或按下键盘。脚本不能自由访问剪贴板。

二 document.execCommand

此方法就是实现剪贴板的关键，它可以传入cut,copy,paste三种参数。从最常用的document.execCommand（’copy’）开始介绍。

$_[JavaScript 复制内容到剪贴板]

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
方法返回一个 Boolean 值，表示操作是否成功。
aCommandName ：表示命令名称，比如： copy, cut 等（更多命令见命令）；
aShowDefaultUI：是否展示用户界面，一般情况下都是 false；
aValueArgument：有些命令需要额外的参数，一般用不到；

### 1 是否支持
在使用之前，我们应该检查浏览器是否支持copy命令:document.queryCommandSupported('copy');或document.queryCommandEnabled('copy');，这两个方法效果相同。

但在Chrome下，尽管Chrome确实支持使用copy命名,但两个方法都返回false。所以最好是将检查代码包在一个try-catch代码块中。

### 2 突出显示文本
下一步，我们应该允许用户复制什么呢？必须突出显示文本，所有浏览器都可用select()方法选择文本input和textarea内的文本。同时Firefox和Chrome / Opera也支持document.createRange方法，该方法允许从任何元素中选择文本，如下：

// select text in #myelement node
var myelement = document.getElementById('#myelement'),
range = document.createRange();

range.selectNode(myelement);
window.getSelection().addRange(range);

但IE / Edge不支持。

三 clipboard.js

若你不想自己实现一个较为健壮的跨浏览器剪贴板方法的话，clipboard.js可以帮你。它有好几种设置选项的方式，如H5的data属性，设置绑定触发元素以及目标元素，如：

<input id="copyme" value="text in this field will be copied" />
<button data-clipboard-target="#copyme">copy</button>

四 自己动手实现

clipboard.js大小仅2Kb，若仅实现如下的部分功能的话，那么可以在20行的代码内实现：

  1. 仅部分表单元素可被复制
  2. 若在不支持的浏览器中（没错，就是指Safari）(译注，Safari其实已经支持)，可突出显示选中文本，并提示用户按Ctrl / Cmd + C。
    像clipboard.js一样，先创建一个button用于触发方法，它具有一个data属性data-copytarget，指向要copy的元素(即#website)
<input type="text" id="website" value="http://www.sitepoint.com/" />
<button data-copytarget="#website">copy</button>

一个立即执行函数表达式绑定click事件的函数，该函数用于解析data-copytarget属性内容，选择对应字段的文本并执行document.execCommand(‘copy’)。若失败，文本保持选中状态，显示提示框：

(function() {
    'use strict';
    // click events
    document.body.addEventListener('click', copy, true);
    // event handler
    function copy(e) {
        // find target element
        var
            t = e.target,
            c = t.dataset.copytarget,
            inp = (c ? document.querySelector(c) : null);

        // is element selectable?
        if (inp && inp.select) {
            // select text
            inp.select();
            try {
                // copy text
                document.execCommand('copy');
                inp.blur();
            }
            catch (err) {
                alert('please press Ctrl/Cmd+C to copy');
            }
        }
    }
})();

示例：虽然在上例中，算上样式和动画的代码，代码已经超过20行了，但动画和样式是可选的。

总结：

  1. 通过.select()选择要复制的表单元素的内容
  2. 调用document.execCommand(“copy”)方法
  3. 调用.blur()方法，从表单元素中移除焦点
  4. 将第2、3步包在try catch块中，在不支持的浏览器下则提示

五 其他方式

有很多新颖的剪贴板应用方式。例如Trello.com,将鼠标悬停在卡片上时，可以按Ctrl / Cmd + C 并将该卡片的链接地址复制到剪贴板。其背后实现的方式为：先创建一个包含URL的隐藏表单元素，然后选中并复制其内容。非常巧妙且实用 —— 我怀疑很少有用户知道这个功能！

# B [JavaScript 复制内容到剪贴板]

曲线救国

#### 其它地方复制
有的时候页面上并没有 <input> 标签，我们可能需要从一个 <div> 中复制内容，或者直接复制变量。

还记得在 execCommand() 方法的定义中提到，它只能操作可编辑区域，也就是意味着除了 <input>、<textarea> 这样的输入域以外，是无法使用这个方法的。

1
<button id="btn">点我复制</button>
1
2
3
4
5
6
7
8
9
10
11
12
const btn = document.querySelector('#btn');
btn.addEventListener('click',() => {
	const input = document.createElement('input');
	document.body.appendChild(input);
 	input.setAttribute('value', '听说你想复制我');
	input.select();
	if (document.execCommand('copy')) {
		document.execCommand('copy');
		console.log('复制成功');
	}
    document.body.removeChild(input);
})

算是曲线救国成功了吧。在使用这个方法时，遇到了几个坑。

遇到的坑

在Chrome下调试的时候，这个方法时完美运行的。然后到了移动端调试的时候，坑就出来了。
对，没错，就是你，ios。。。

  1. 点击复制时屏幕下方会出现白屏抖动，仔细看是拉起键盘又瞬间收起
    知道了抖动是由于什么产生的就比较好解决了。既然是拉起键盘，那就是聚焦到了输入域，那只要让输入域不可输入就好了，在代码中添加 input.setAttribute('readonly', 'readonly'); 使这个 <input> 是只读的，就不会拉起键盘了。

  2. 无法复制
    这个问题是由于 input.select() 在ios下并没有选中全部内容，我们需要使用另一个方法来选中内容，这个方法就是 input.setSelectionRange(0, input.value.length);。

完整代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
const btn = document.querySelector('#btn');
btn.addEventListener('click',() => {
	const input = document.createElement('input');
    input.setAttribute('readonly', 'readonly');
    input.setAttribute('value', 'hello world');
    document.body.appendChild(input);
	input.setSelectionRange(0, 9999);
	if (document.execCommand('copy')) {
		document.execCommand('copy');
		console.log('复制成功');
	}
    document.body.removeChild(input);
})

# E 实践

10：32

# C [网页内容不能选中复制的解决方法大全]

2018.4.16 21:22 星期一

防复制大全及破解办法
$_PS: 原文就不可以正常复制

第一部分：防止你的网站博客文章被非法复制保存或者查看的 部分源代码

  1. 页面中加入如下语句，则网页将不能被保存，让网页无法 另存为：
    在<body>......</body>之间加入 <noscript><iframe src=*></iframe></noscript>
    加入上述代码后，当执行“另存为”命令时，会弹出“保存网页时出错”的对话框。

  2. 列代码放到<body></body>或者<head></head>之间，提示禁止使用右键。

    <script LANGUAGE="JavaScript">
    function click() { if (event.button==2){alert('你好,右键已被禁止使用'); } } 
    document.onmousedown=click
</script>

  3. 为了防止别人偷窃自己网站上的东西，运用CSS代码控制右键的复制或另存为。可以在网页制作的过程中加入以下代码：

    1. 忽视右键 <body oncontextmenu=\"return false\">
    2. 让你的网页无法另存为 <noscript><iframe src=*></iframe></noscript>

  4. 彻底禁止右键快捷菜单的出现呢？代码如下：

    < Script Language=javascript>
    function Click(){
        alert('版权所有(C)2008 飞龙在天e000);
        window.event.returnValue=false;
    }
    document.oncontextmenu=Click;
< /Script>

  5. 一段非常简单的JS程序，这段程序应该放在主页的<body></body>中间，可以禁止察看源代码。

    <SCRIPT language=javascript>
    function click() {if (event.button==2) {alert('不许你偷看！');}}document.onmousedown=click
</SCRIPT>

第二部分：反复制粘贴的破解办法集锦

$_PS: 都是正常流程；并不能真正完全禁止

1，点击工具-INTERNET选项-安全设置。把它设置为高，点确定，再刷新下网页就可复制了。不过复制了后改回原来的，不然会影响正常上网。也可以点击IE菜单栏上的”文件”->发送->电子邮件页面(跟这向导说的去做就可以拉,一路点击’下一步”)然后就可以在弹出的邮件窗口中复制你要的内容就可以了。安全级别最高的时候，一切控件和脚本均不能运行，再厉害的网页限制手段统统全部作废。
2，用文件菜单里的另存为
3，查看-源文件。
4，换个浏览器如GreenBrowser，如MYIE，它有一个解除右键设置的选项，你可以试试;….浏览器插件
5， 在页面中点击右键，当出现警告窗口时，左手按键盘上的“CTRL+F4”键关闭提示窗口（以上的方法适用于仅禁用而没有隐藏右键菜单的网页）。

knowledge is no pay,reward is kindness
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多
0%