Die moderne Art
Async Clipboard API verwenden
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');
}
});
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);
})
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
HTML
<!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>CSS
: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;
}
JS
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);
}
});