O que é a clipboard API

A clipboard API é utilizada para controlar o copia e cola dos usuários. Podemos utilizá-la para adicionar textos ou imagens ao seu evento de "copy" e para fazer o usuário colar o que está armazenado no seu CNTRL + C.

Permissões

Para escrever no CNTRL + C do cliente não é necessário o cliente dar a permissão para realizarmos essa tarefa. Porém, para qualquer outra tarefa é necessário o usuário dar a permissão para tal. Lembrando que cada navegador define as suas regras de permissão, ou seja, pode haver casos em que é pedido a permissão de escrita para o usuário.

Como utilizar:

Para leitura do CNTRL + C

navigator.clipboard
.readText()
.then(
(clipText) => (document.querySelector(".editor").innerText += clipText),
);

Link de exemplo para a clipboard API:

https://async-clipboard-api.glitch.me/

Exemplo de interceptação do evento de cópia:

const source = document.querySelector("div.source");

source.addEventListener("copy", (event) => {
const selection = document.getSelection();
event.clipboardData.setData("text/plain", selection.toString().toUpperCase());
event.preventDefault();
});

Interceptação do evento de corte:

const source = document.querySelector("div.source");

source.addEventListener("cut", (event) => {
const selection = document.getSelection();
event.clipboardData.setData("text/plain", selection.toString().toUpperCase());
selection.deleteFromDocument();
event.preventDefault();
});

Interceptação do evento de cola:

const target = document.querySelector("div.target");

target.addEventListener("paste", (event) => {
event.preventDefault();

let paste = (event.clipboardData || window.clipboardData).getData("text");
paste = paste.toUpperCase();
const selection = window.getSelection();
if (!selection.rangeCount) return;
selection.deleteFromDocument();
selection.getRangeAt(0).insertNode(document.createTextNode(paste));
selection.collapseToEnd();
});

Bem pessoal esse é o básico para se utilizar essa API, qualquer dúvida por favor me chamem e caso queiram aprofundar mais olhem os links de referência. Me sigam no Instagram @luccaparadeda .

Referencias:

https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API

https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event