Fork me on GitHub

浏览器中实现剪切板的内容操作

字数统计: 1.6k字   |   阅读时长≈ 7分

浏览器允许 JavaScript 脚本读写剪贴板，自动复制或粘贴内容。主要是用来操作文本、图片

有三种方式可操作剪切板

  • Document.execCommand() 【此API已从W3C标准中删除】
  • Clipboard API （推荐）
  • 事件监听 copy、paste、cut

1、Docement.execCommand

它支持复制、粘贴、剪切三个操作

1
2
3
document.execCommand('copy')（复制）
document.execCommand('cut')（剪切）
document.execCommand('paste')（粘贴）

通用页面布局，引用了layui

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 页面
<div class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">输入框</label>
            <div class="layui-input-block">
                <input type="text" name="title" id="my-input"   placeholder="请输入标题"  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">文本域</label>
            <div class="layui-input-block">
                <textarea rows="4" cols="3" id="my-textarea" class="layui-textarea">默认值</textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">操作</label>
            <div class="layui-input-block" style="display: flex;">
                <button class="layui-btn layui-btn-radius layui-btn-normal" id="copy">复制</button>
                <button class="layui-btn layui-btn-radius layui-btn-normal" id="paste">粘贴</button>
                <button class="layui-btn layui-btn-radius layui-btn-normal" id="cut">剪切</button>
                <button class="layui-btn layui-btn-radius layui-btn-normal" id="copy2">图文复制</button>
                <button class="layui-btn layui-btn-radius layui-btn-normal" id="read">读取剪切板</button>
                <button class="layui-btn layui-btn-radius layui-btn-normal" id="selection">获取选中内容</button>
            </div>
        </div>
    </div>

操作示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 获取元素
let myInput = document.querySelector('#my-input'),
    myTextarea = document.querySelector('#my-textarea');

    layui.use(['form'], function() {
        let {form,jquery: $} = layui;
        form.render()
        
        	// 复制
            $('#copy').on('click', function(e) {
                // 让 文本域 文本选中
                myTextarea.select();
                // 执行复制，会触发 copy 事件监听
                document.execCommand('copy');
            })
        
        	// 剪切 ，会触发 cut 事件监听
            $('#cut').on('click', function(e) {
                myTextarea.select();
                document.execCommand('cut');
            })
        
            // 粘贴 chrome不生效，需要用户授权 https 等未知条件限制【未查清楚】
            $('#paste').on('click', function(e) {
                myInput.focus()
                document.execCommand('paste');
            })
    
    })

封装将内容复制到剪切板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const copyToClipboard = str => {
  const el = document.createElement('textarea');  // 创建一个 <textarea> 元素
  el.value = str;                                 // 设置它的值为你想复制的字符串
  el.setAttribute('readonly', '');                // 设置为只读以防止干扰
  el.style.position = 'absolute';                 
  el.style.left = '-9999px';                      // 移出屏幕外以使其不可见
  document.body.appendChild(el);                  // 插入 <textarea> 元素到 HTML 文档中
  const selected =            
    document.getSelection().rangeCount > 0        // 检查是否之前曾选中过内容
      ? document.getSelection().getRangeAt(0)     // 如果找到，则保存选中
      : false;                                    // 标记为  false 以表示不存在之前选中的内容
  el.select();                                    // 选中 <textarea> 的内容
  document.execCommand('copy');                   // 复制 - 仅当作为用户操作的响应结果时才可以工作(比如，点击事件)
  document.body.removeChild(el);                  // 移除 <textarea> 元素
  if (selected) {                                 // 如果在复制前已存在选中的内容
    document.getSelection().removeAllRanges();    // 取消 HTML 文档中所有的选中部分
    document.getSelection().addRange(selected);   // 恢复原来的选中
  }
};

它只能将选中的内容复制到剪贴板，无法向剪贴板任意写入内容。

其次，它是同步操作，如果复制/粘贴大量数据，页面会出现卡顿。有些浏览器还会跳出提示框，要求用户许可，这时在用户做出选择前，页面会失去响应。

为了解决这些问题，浏览器厂商提出了异步的 Clipboard API

2、异步 Clipboard API

Clipboard API 是下一代的剪贴板操作方法，比传统的document.execCommand()方法更强大、更合理。

它的所有操作都是异步的，返回 Promise 对象，不会造成页面卡顿。而且，它可以将任意内容（比如图片）放入剪贴板。

1
2
3
4
5
6
7
8
9
//Clipboard 对象提供了四个方法

// 此两种方法仅持支文本操作
navigator.clipboard.readText
navigator.clipboard.writeText

// 可用于将任意数据写入剪贴板，可以是文本数据，也可以是二进制数据
navigator.clipboard.read
navigator.clipboard.write

操作示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const clipboardObj = navigator.clipboard;

// 复制，但不会触发 copy 事件
$('#copy').on('click', function(e) {
    clipboardObj.writeText($(myTextarea).val())
})

// 剪切
$('#cut').on('click', function(e) {
    clipboardObj.writeText($(myTextarea).val())
    $(myTextarea).val('')
})

// 粘贴
$('#paste').on('click', async function(e) {
    const text = await clipboardObj.readText();
    $(myInput).val(text)
})


直接在代码中执行剪切板操作可能会报错，建议放在事件监听的回调函数中。

需要注意的是，脚本读取的总是当前页面的剪贴板。这带来的一个问题是，如果把相关的代码粘贴到开发者工具中直接运行，可能会报错，因为这时的当前页面是开发者工具的窗口，而不是网页页面。

3、监听 剪切板操作事件

通过监听事件可以阻止用户的 默认操作， 实现 禁止 复制粘贴等功能

操作示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
# 禁止粘贴
document.addEventListener('paste', function(e) {
    e.preventDefault()
})

# 将复制的文本 字母转大写 再 存入剪切板
document.addEventListener('copy',  function(e) {
    console.log('copy:', e.clipboardData);
    // 获取选中的文本，图片等其他资源获取不了
    let selection = document.getSelection();
    // 文本内容转大写
    event.clipboardData.setData('text/plain', selection.toString().toUpperCase());
    event.preventDefault();
})

# 同时写入 文本和图片。此时在表单中粘贴为文本，在微信中粘贴为图片
$('#copy2').on('click', async function() {
    const image = await fetch('../images/b2.png').then(res=> res.blob())
    const text = new Blob(['Cute sleeping kitten'], {type: 'text/plain'});
    const item = new ClipboardItem({
        'text/plain': text,
        'image/png': image // image 必须是 Blob 对象
    });
    await clipboardObj.write([item]);
})

# 读取剪切板中的数据
$('#read').on('click', async function() {
    // 检测 浏览器是否支持 剪切板
    let flag = await navigator.permissions.query({name: "clipboard-read"})
    if (flag.state == "granted" || flag.state == "prompt") {
        let clipboardItems = await clipboardObj.read()
        console.log(clipboardItems);
        try {
            for (const clipboardItem of clipboardItems) {
                for (const type of clipboardItem.types) {
                    const blob = await clipboardItem.getType(type);
                    // 此处 blob 为 二进制对象
                    console.log(type, URL.createObjectURL(blob), blob);
                }
            }
        } catch (err) {
            console.error(err.name, err.message);
        }
    }
})

本文借鉴了 阮一峰大佬的 帖子

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

侠客行
作者：李白
赵客缦胡缨，吴钩霜雪明。
银鞍照白马，飒沓如流星。
十步杀一人，千里不留行。
事了拂衣去，深藏身与名。
闲过信陵饮，脱剑膝前横。
将炙啖朱亥，持觞劝侯嬴。
三杯吐然诺，五岳倒为轻。
眼花耳热后，意气素霓生。
救赵挥金槌，邯郸先震惊。
千秋二壮士，烜赫大梁城。
纵死侠骨香，不惭世上英。
谁能书阁下，白首太玄经。