使用document.execCommand命令实现复制粘贴剪贴功能

会会 发表于 javascript 分类,标签:

版本信息

作者时间主要变更内容链接
王会锋2022年4月19日

案例


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
47
48
49
50
51
52
53
54
55
<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport"
         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>document.execCommand</title>
</head>
<body>
<div>
   <button onclick="cut()">剪贴</button>
   <button onclick="paste()">粘贴</button>
   <button onclick="copy()">复制</button>
   <p id="jsP">
       Try to alter this text using the execCommands buttons above
       You see, in this world there's two kinds of people
   </p>
   <textarea name="" id="jsTextArea" cols="30" rows="10"></textarea>
</div>
<script>
   // 复制
   function copy() {
       // 需要复制的文本
       const copyElement = document.getElementById('jsP');
       // 展示复制内容的容器
       const textareaElement = document.getElementById('jsTextArea');
       textareaElement.innerText = copyElement.innerHTML;
       textareaElement.select();
       document.execCommand('copy');
   }
   // 粘贴
   function paste() {
       // 需要复制的文本
       const copyElement = document.getElementById('jsP');
       // 展示复制内容的容器
       const textareaElement = document.getElementById('jsTextArea');
       textareaElement.innerText = copyElement.innerHTML;
       textareaElement.select();
       document.execCommand('paste');
   }
   // 剪贴
   function cut() {
       // 需要复制的文本
       const copyElement = document.getElementById('jsP');
       // 展示复制内容的容器
       const textareaElement = document.getElementById('jsTextArea');
       textareaElement.innerText = copyElement.innerHTML;
       document.execCommand('cut');
       copyElement.innerHTML = '';
       textareaElement.select();
   }
</script>
</body>
</html>


运行结果

  • 点击剪切

    • 把这段文本的内容复制给textarea,然后调用document.execCommand(‘cut),清空这块文本的内容,然后使textarea文本内容选中
      02247f1b12814e5a2f60a71549677ac5_pasted-305.png

  • 点击粘贴

    • 把这段文本的内容复制给textarea,然后调用document.execCommand(‘paste),然后使textarea文本内容选中
      61ce074401f2ff14b828372f5f871b9d_pasted-304.png

  • 点击复制

    • 把这段文本的内容复制给textarea,然后调用document.execCommand(‘copy),然后使textarea文本内容选中
      20fa23c1ee85ab0faf1983fa82017da4_pasted-303.png


0 篇评论

发表我的评论