クリップボードを活用することで、Webアプリケーションはユーザーの作業効率を大幅に向上させることができます。この記事では、JavaScriptを使用してテキストをコピーおよびペーストする基本的な方法を紹介します。
テキストのコピー方法
テキストをクリップボードにコピーするには、document.execCommand() メソッドか新しい Clipboard API を使用します。
document.execCommand() を使用する方法
- コピーするテキストが含まれる要素を選択します。
- 要素のテキストを選択します（例：
element.select()）。 document.execCommand('copy')を実行します。
function copyText() {
var text = document.getElementById('copyText');
text.select();
document.execCommand('copy');
}Clipboard API を使用する方法
navigator.clipboard.writeText() を使用して、よりモダンな方法でテキストをクリップボードにコピーできます。
async function copyTextNew() {
const text = 'コピーするテキスト';
try {
await navigator.clipboard.writeText(text);
console.log('テキストをクリップボードにコピーしました');
} catch (err) {
console.error('コピーに失敗しました', err);
}
}テキストの貼り付け方法
クリップボードからテキストを貼り付けるには navigator.clipboard.readText() を使用します。
async function pasteText() {
try {
const text = await navigator.clipboard.readText();
console.log('クリップボードからのテキスト:', text);
} catch (err) {
console.error('貼り付けに失敗しました', err);
}
}
デモ
この方法を使用することで、ユーザーはクリップボードの内容を簡単にコピー＆ペーストでき、アプリケーションのユーザビリティを向上させることができます。
コメント