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
66
67
68
69
70
71
72
73
74
75
76
|
---
title: API del portapapeles
slug: Web/API/API_del_portapapeles
translation_of: Web/API/Clipboard_API
---
<div>{{DefaultAPISidebar("Clipboard API")}}</div>
<p>La <strong>API del portapapeles </strong>permite acceder los comandos del portapapeles (cortar, copiar y pegar), así como leer y escribir de manera asíncrona el portapapeles del sistema. Acceder al contenido del portapapeles está sujeta a la <a href="/es/docs/Web/API/Permissions_API">API de permisos</a>: El permiso <code>clipboard-write</code> es concedido automáticamente a las páginas cuando están en la pestaña activa. El permiso <code>clipboard-read</code> debe ser solicitado, lo que se puede hacer intentando leer directamente el portapapeles.</p>
<p>Esta API está diseñada para reemplazar el acceso al portapapeles usando {{domxref("document.execCommand()")}}.</p>
<h2 id="Accediendo_al_portapapeles">Accediendo al portapapeles</h2>
<p>En vez de instanciar un objeto <code>Clipboard</code>, se puede acceder al portapapeles del sistema a través de la variable global {{domxref("Navigator.clipboard")}}:</p>
<pre class="brush: js notranslate">navigator.clipboard.readText().then(
clipText => document.querySelector(".editor").innerText += clipText);</pre>
<p>Esta pieza de código lee el texto que hay en el portapapeles y lo añade al primer elemento que tenga la clase <code>editor</code>. Desde que {{domxref("Clipboard.readText", "readText()")}} (y también {{domxref("Clipboard.read", "read()")}}, de hecho) devuelve una cadena de texto vacía si el contenido del portapapeles no es texto, este código es seguro.</p>
<h2 id="Interfaces">Interfaces</h2>
<dl>
<dt>{{domxref("Clipboard")}} {{securecontext_inline}}</dt>
<dd>Proporciona una interfaz para leer y escribir texto y datos. La especificación se refiere a esto como 'Async Clipboard API.'</dd>
<dt>{{domxref("ClipboardEvent")}} {{securecontext_inline}}</dt>
<dd>Representa la información del evento que se ha disparado. Los eventos que se pueden disparar son: {{domxref("Element/cut_event", "cortar")}}, {{domxref("Element/copy_event", "copiar")}}, y {{domxref("Element/paste_event", "pegar")}}. La especificación se refiere a esto como 'Clipboard Event API'.</dd>
<dt>{{domxref("ClipboardItem")}} {{securecontext_inline}}</dt>
<dd>Representa uno de los objetos del portapapeles, usado en la lectura y escritura de datos.</dd>
</dl>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Observaciones</th>
</tr>
<tr>
<td>{{SpecName('Clipboard API')}}</td>
<td>{{Spec2('Clipboard API')}}</td>
<td>Definición primitiva.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
<h3 id="Clipboard">Clipboard</h3>
<div>
<p>{{Compat("api.Clipboard")}}</p>
<h3 id="ClipboardEvent">ClipboardEvent</h3>
<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
<p>{{Compat("api.ClipboardEvent")}}</p>
<h3 id="ClipboardItem">ClipboardItem</h3>
<p>{{Compat("api.ClipboardItem")}}</p>
<h2 id="Véase_también">Véase también</h2>
<ul>
<li><a href="/es/docs/Web/API/Permissions">Permissions API</a></li>
<li><a href="/es/docs/Web/API/Permissions_API/Using_the_Permissions_API">Using the Permissions API</a></li>
</ul>
</div>
|
