files/zh-cn/web/api/navigator/clipboard/index.html


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
56
57
58
59
60
61
62
63
64
65

---
title: Navigator.clipboard
slug: Web/API/Navigator/clipboard
tags:
  - API
  - Navigator
  - 剪切
  - 剪切板
  - 参考
  - 只读
  - 复制
  - 属性
  - 粘贴
translation_of: Web/API/Navigator/clipboard
---
<p><span class="seoSummary">剪贴板 <a href="/zh-CN/docs/Web/API/Clipboard_API">Clipboard API</a> 为 <strong>{{domxref("Navigator")}}</strong> 接口添加了只读属性 <strong><code>clipboard</code></strong>，该属性返回一个可以读写剪切板内容的 {{domxref("Clipboard")}} 对象。</span> 在 Web 应用中，剪切板 API 可用于实现剪切、复制、粘贴的功能。</p>

<p>只有在用户事先授予网站或应用对剪切板的访问许可之后，才能使用异步剪切板读写方法。许可操作必须通过取得权限 <a href="/zh-CN/docs/Web/API/Permissions_API">Permissions API</a> 的 <code>"clipboard-read"</code> 和/或 <code>"clipboard-write"</code> 项获得。</p>

<h2 id="语法">语法</h2>

<pre class="brush: js"><em>theClipboard</em> = navigator.clipboard;
</pre>

<h3 id="值">值</h3>

<p>用于访问系统剪切板的 {{domxref("Clipboard")}} 对象。</p>

<h2 id="示例">示例</h2>

<p>以下代码使用 <code>navigator.clipboard</code> 来访问系统剪切板，以读取系统剪切板的内容。</p>

<pre class="brush: js">navigator.clipboard.readText().then(
  clipText =&gt; document.querySelector(".cliptext").innerText = clipText);;</pre>

<p>这个代码片段将 HTML 中拥有类名 <code>"cliptext"</code> 的第一个元素的内容替换为剪切板中的内容。这段代码可用于在浏览器拓展中定时自动更新或者由事件触发，实时显示当前剪切板上的内容。</p>

<p>如果剪切板为空，或者不包含文本，则 <code>"cliptext"</code> 元素的内容将被清空。这是因为在剪切板为空或者不包含文本时，{{domxref("Clipboard.readText", "readText()")}} 会返回一个空字符串。</p>

<h2 id="标准">标准</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">标准</th>
   <th scope="col">状态</th>
   <th scope="col">备注</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('Clipboard API','#navigator-clipboard','navigator.clipboard')}}</td>
   <td>{{Spec2('Clipboard API')}}</td>
   <td>初次定义</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>


<p>{{Compat("api.Navigator.clipboard")}}</p>

<div>{{APIRef("Clipboard API")}}</div>