「navigator.clipboard」というAPIを使って、クリック(タップ)することで特定の文章をコピーする方法を紹介します。
自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればと思います!
目次
実装例とコード
下のボタンをクリックすると、この文章をクリップボードにコピーできます。
JavaScriptのClipboard APIを使うと、実装例のようにボタンクリックで特定のテキストをコピーできます!
navigator.clipboard.writeText(p.textContent).then(
() => {
// コピーに成功したときの処理
},
() => {
// コピーに失敗したときの処理
});
「navigator.clipboard.writeText(‘コピーする内容’)」と記述することで、引数に指定した内容をクリップボードにコピーできます。
コピーに成功したときと失敗したときの処理も記述でき、何も書かなくてもOKですが、本実装例のようにalert()でメッセージを表示させるとわかりやすいでしょう。
また、一部の古いブラウザ(IEなど)では動作しません。
ChromeやEdge、Firefox、Safariは動作します。
加えて、HTTP環境でも動作しないらしいです。(クレジットカードなどの重要情報をコピーされてしまうのを防ぐため?)
この機能を使う使わないに関わらず、WebサイトはHTTPS環境にしておきましょう。
HTML/JavaScript
<p>下のボタンをクリックすると、この文章をクリップボードにコピーできます。</p>
<button>上記の文章をコピーする</button>
<textarea placeholder="ここにペーストしてコピーできたか確認できます。"></textarea>
const p = document.querySelector('p');
const button = document.querySelector('button');
button.addEventListener('click', () => {
if (!navigator.clipboard) {
alert("このブラウザは対応していません");
return;
}
navigator.clipboard.writeText(p.textContent).then(
() => {
alert('文章をコピーしました。');
},
() => {
alert('コピーに失敗しました。');
});
});
- ブラウザが未対応の場合に備え、if (!navigator.clipboard) {}でalert()を出し、早期リターンするようにしています。
応用例
navigator.clipboardを使って、特定のカラーをクリックするとそのカラーコードをコピーできるツールを作成しています。
あわせて読みたい


【自動変換 & 一覧から取得】RGBとカラーコード
カラーコードを調べたい! 色見本からカラーコードを取得したい! コンピュータにとっては便利でも、人にとってはピンとこない16進数カラーコードを簡単に取得できるツ…
またこちらの記事では、コピーしたときの表示をアラートではなく、それぞれのカラーの下に自動表示させるアコーディオンのような方式にしています。特定のメッセージを表示させる方法については以下記事も合わせてご覧ください。
あわせて読みたい


【JavaScript&CSS】ボタンを押したらメッセージを表示する
alertやアコーディオン、モーダルウィンドウを使って、ボタンを押したらメッセージを表示する方法を3つ紹介します。自分の学習・メモ用がメインですが、プログラミング…