Come incollare del testo

Harry Teodoulo
Harry Theodoulou

Per leggere il testo dagli appunti dell'utente in modo programmatico, ad esempio dopo aver fatto clic su un pulsante, puoi utilizzare il metodo readText() dell'API Async Clipboard. Se le autorizzazioni per la lettura degli appunti non sono state ancora concesse, la chiamata a navigator.clipboard.readText() ne richiederà la prima volta alla prima chiamata al metodo.

const pasteButton = document.querySelector('#paste-button');

pasteButton
.addEventListener('click', async () => {
   
try {
     
const text = await navigator.clipboard.readText()
     document
.querySelector('textarea').value += text;
     console
.log('Text pasted.');
   
} catch (error) {
     console
.log('Failed to read clipboard');
   
}
});

Supporto del browser

  • 66
  • 79
  • x
  • 13.1

Fonte

Il classico

In uso: document.execCommand()

Utilizzando l'icona document.execCommand('paste') puoi incollare i contenuti degli appunti nel punto di inserimento (l'elemento HTML attualmente attivo). Il metodo execCommand restituisce un valore booleano che indica se l'evento paste è riuscito. Tuttavia, questo metodo presenta alcune limitazioni, ad esempio perché è sincrono e se si incollano grandi quantità di dati, la pagina potrebbe essere bloccata.

pasteButton.addEventListener('click', () => {
  document
.querySelector('textarea').focus();
 
const result = document.execCommand('paste')
  console
.log('document.execCommand result: ', result);
})

Supporto del browser

  • 1
  • 12
  • 1
  • 1.3

Fonte

Miglioramento progressivo

pasteButton.addEventListener('click', async () => {
   
try {
     
const text = await navigator.clipboard.readText()
     document
.querySelector('textarea').value += text;
     console
.log('Text pasted.');
   
} catch (error) {
     console
.log('Failed to read clipboard. Using execCommand instead.');
     document
.querySelector('textarea').focus();
     
const result = document.execCommand('paste')
     console
.log('document.execCommand result: ', result);
   
}
});

Per approfondire

Demo

<!DOCTYPE html>
<html lang="en">
 
<head>
   
<meta charset="utf-8" />
   
<meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="icon"
      href="data:image/svg+xml,
<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
    />
   
<title>How to paste text</title>
 
</head>
 
<body>
   
<h1>How to paste text</h1>
   
<p>
     
<button type="button">Paste</button>
   
</p>
   
<textarea></textarea>
 
</body>
</html>

       
:root {
 
color-scheme: dark light;
}

html
{
 
box-sizing: border-box;
}

*,
*:before,
*:after {
 
box-sizing: inherit;
}

body
{
 
margin: 1rem;
 
font-family: system-ui, sans-serif;
}

button
{
 
display: block;
}
       

       
const pasteButton = document.querySelector('button');

pasteButton
.addEventListener('click', async () => {
 
try {
   
const text = await navigator.clipboard.readText()
    document
.querySelector('textarea').value += text;
    console
.log('Text pasted.');
 
} catch (error) {
    console
.log('Failed to read clipboard. Using execCommand instead.');
    document
.querySelector('textarea').focus();
   
const result = document.execCommand('paste')
    console
.log('document.execCommand result: ', result);
 
}
});