Clipboard API（取得） — navigator.clipboard.readText().then(t => {})
Clipboard API は「クリップボードにある文字列を読み取る」こともできます。navigator.clipboard.readText() を使うと、ユーザーが直前にコピーしたテキストを JavaScript で取得できます。コピーした内容をフォームに貼り付けたり、アプリ内で利用したりできます。
基本のコード例
<button id="paste">貼り付け</button>
<div id="out"></div>
<script>
const out = document.getElementById("out");
document.getElementById("paste").addEventListener("click", async () => {
try {
const text = await navigator.clipboard.readText();
out.textContent = "取得したテキスト: " + text;
} catch (err) {
out.textContent = "取得に失敗しました: " + err;
}
});
</script>
navigator.clipboard.readText()
クリップボードから文字列を取得する。- 戻り値: Promise（非同期）。成功すれば文字列、失敗すれば例外。
- 注意: HTTPS環境やユーザー操作（クリックなど）に紐付けないと動作しないブラウザが多い。
よく使うテンプレート集
テキストエリアに貼り付け
const area = document.getElementById("memo");
navigator.clipboard.readText().then(text => {
area.value = text;
});
検索ボックスに貼り付けて検索
navigator.clipboard.readText().then(text => {
location.href = "/search?q=" + encodeURIComponent(text);
});
コピーした内容を即アラート表示
navigator.clipboard.readText().then(text => {
alert("クリップボードの内容: " + text);
});
例題: 招待コードを貼り付けてログイン
<input id="code" placeholder="招待コードを貼り付け">
<button id="paste">貼り付け</button>
<script>
const input = document.getElementById("code");
document.getElementById("paste").addEventListener("click", async () => {
try {
const text = await navigator.clipboard.readText();
input.value = text; // 招待コードを入力欄にセット
} catch {
alert("クリップボードから取得できませんでした");
}
});
</script>
- 効果: コピー済みの招待コードをワンクリックで入力欄に貼り付けられる。
実務でのコツ
- HTTPS必須: セキュリティのため、
http://では動かないブラウザが多い。 - ユーザー操作に紐付け: クリックやタップイベント内で呼び出す。自動取得は制限される。
- 非同期処理:
awaitや.then()を使って結果を扱う。 - 失敗時のフォールバック: 古いブラウザでは
document.execCommand('paste')は使えないので、手動で貼り付けてもらうしかない。 - コピーと組み合わせ:
writeTextとreadTextを両方覚えると「コピー＆貼り付け」機能を自在に作れる。
ありがちなハマりポイントと対策
- 取得できない:
- 原因: HTTPSでない、またはユーザー操作に紐付けていない。
- 対策: ボタンイベント内で呼び出す。
- 非同期処理を忘れる:
- 対策:
awaitや.then()を必ず使う。
- 対策:
- 古いブラウザで動かない:
- 対策: サポート状況を確認し、必要なら「貼り付けてください」と案内する。
練習問題（メモ帳アプリ風）
<textarea id="memo" rows="5" cols="30"></textarea>
<button id="pasteMemo">クリップボードから貼り付け</button>
<script>
document.getElementById("pasteMemo").addEventListener("click", async () => {
try {
const text = await navigator.clipboard.readText();
document.getElementById("memo").value = text;
} catch {
alert("貼り付けに失敗しました");
}
});
</script>
- 効果: クリップボードの内容をテキストエリアに貼り付けられる。
直感的な指針
navigator.clipboard.readText= 「クリップボードから文字列を取得する」関数。- 必ずユーザー操作に紐付け、HTTPS環境で使う。
- コピーは
writeText、取得はreadText。両方覚えると便利。 - UIに反映して「貼り付けボタン」を作ると初心者でも直感的に理解できる。