js 与剪贴板

前端 142

相关知识点：

为了安全考虑，浏览器禁止 web 脚本主动去操作系统级的剪贴板，但是如果用户主动操作了剪切板（进行了复制，剪切，粘贴），那么允许你的代码去捕获这个事件，并且clipboardData对象操作剪切板的内容

事件

可以捕获以下事件 

　　beforecopy：在发生复制操作前触发;
　　copy：在发生复制操作的时候触发;
　　beforecut：在发生剪切操作前触发;
　　cut：在发生剪切操作的时候触发;
　　beforepaste：在发生粘贴操作前触发;
　　paste：在发生粘贴操作的时候触发。

clipboardData 对象

属性

clipboardData 对象有三个方法
 方法 | 功能
 --- | ---
 clearData() | 清空剪切板
 getData(text/url) | 从剪贴板获取指定格式的数据。
 setData(text/url,data) | 给clipboardData对象赋予数据。

具体代码

document.addEventListener('copy', function(e){ 
    e.clipboardData.setData('text/plain', 'Hello, world!');
    e.clipboardData.setData('text/html', '<b>Hello, world!</b>');
});

另一种方法：execCommand 方法执行拷贝

clipboard.js是一个非常流行的拷贝粘贴工具。

简单看了一下源码，这个库在实现拷贝粘贴的时候，用到了 document.execCommand

MDN 上是这样解释的 

当一个HTML文档切换到设计模式 designMode时，文档对象暴露 execCommand 方法，该方法允许运行命令来操纵可编辑区域的内容。大多数命令影响文档的选择（粗体，斜体等），而其他命令插入新元素（添加链接）或影响整行（缩进）。当使用contentEditable时，调用 execCommand() 将影响当前活动的可编辑元素。

借助execCommand方法，同样可以实现复制和剪贴功能，
 具体做法如下
 1.获取需要被操作部分的 dom 对象，称之为 inputText
 2.聚焦 inputText（inputText.focus()）
 3.选中需要操作的内容（inputText.setSelectionRange(0, inputText.value.length); ）
 4.拷贝操作：document.execCommand('copy', true);

HTMLInputElement.setSelectionRange(开始位置,结束位置,[optional]选择方向) 方法可以从一个被 focused 的 <input>元素中选中特定范围的内容。（选择方向有三个可选项："forward","backward"和"none"：分别表示"从前往后", "从后往前"和"选择方向未知或不重要"）

示例代码：

<p>点击复制后在右边textarea CTRL+V看一下</p>
<input type="text" id="inputText" value="测试文本"/>
<input type="button" id="btn" value="复制"/>
<textarea rows="4"></textarea>
<script type="text/javascript">
    var btn = document.getElementById('btn');
    btn.addEventListener('click', function(){
        var inputText = document.getElementById('inputText');
        var currentFocus = document.activeElement;
        inputText.focus();
        inputText.setSelectionRange(0, inputText.value.length);
        document.execCommand('copy', true);
        currentFocus.focus();
    });
</script>

execCommand 可选参数

bool = document.execCommand(命令名称, 是否展示用户界面, 参数)

命令名称有很多，比如 copy,cut,delete等
 不一一列出来了，需要的时候去查一下文档

Comments
Write a Comment