Text einfügen

Harry Theodoulou
Harry Theodoulou

Wenn Sie Text programmatisch aus der Zwischenablage des Nutzers lesen möchten, z. B. nach einem Klick auf eine Schaltfläche, können Sie die Methode readText() der Async Clipboard API verwenden. Wenn die Berechtigungen zum Lesen der Zwischenablage noch nicht gewährt wurden, wird sie beim ersten Aufruf der Methode durch den Aufruf von navigator.clipboard.readText() angefordert.

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');
   
}
});

Unterstützte Browser

  • 66
  • 79
  • x
  • 13.1

Quelle

Die klassische Art

document.execCommand() verwenden

Mit document.execCommand('paste') können Sie den Inhalt der Zwischenablage an der Stelle einfügen, an der das HTML-Element im Fokus ist. Die Methode execCommand gibt einen booleschen Wert zurück, der angibt, ob das paste-Ereignis erfolgreich war. Diese Methode ist jedoch mit Einschränkungen verbunden. Da sie beispielsweise synchron ist, kann das Einfügen großer Datenmengen die Seite blockieren.

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

Unterstützte Browser

  • 1
  • 12
  • 1
  • 1.3

Quelle

Progressive Enhancement

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);
   
}
});

Weitere Informationen

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);
 
}
});