【1行だけ】ボタンをクリックしたら文章をコピーしたい!【JavaScript】

execCommand や DOM要素を作らなくても実装できます!

みなさん、こんにちは。どんぶラッコです。

今日はボタンをクリックしたら文章がコピーされる機能を作っていこうと思います。

検索すると execCommand() などを使う方法が出てきたりしますが、機能が廃止されているので使わないようにしましょう

ではどうしたらいいのか?

今回は navigator.clipboard を使う方法をご紹介します!

こちらを使えば、「文章 コピー」などで上位の結果に表示される ”DOM要素を作って、文章を作って、クリップボードにコピーする…” なんて面倒なステップを踏まなくて良くなるのでオススメです!

ということで早速みていきましょう。

ちなみに、 navigator.clipboard の対応状況はこんな感じです(2021年7月26日 現在)

IEが対応していませんが、もうサポートが終了するブラウザなので特に気にせずとも良いでしょう!

サンプルコード

See the Pen by cha1ra (@cha1ra) on CodePen.

※埋め込みのボタンをクリックしても実行されないので、 codepenのサイトに遷移してからお試しください!

https://codepen.io/cha1ra/pen/VwbyMdb

HTML

<button id="button">
  文書をコピー
</button>

JavaScript

const button = document.querySelector('#button')
button.addEventListener('click', () => {
  navigator.clipboard.writeText('コピーされた文章')
  button.innerHTML = 'コピー完了!'
  setTimeout(() => button.innerHTML = '文章をコピー', 1000)
})

解説

実際に文章のコピーをしているところはたった1行です。

navigator.clipboard.writeText('コピーされた文章')

これを書けばOK!

— 完 —

で終わってしまうとあまりにも味気ないので、 navigator の部分を深堀りします。

navigator とは?

ブラウザでJavaScriptを実行する際に、デフォルトでNavigatorオブジェクトを取得することができます。

これは、ユーザの状態などを取得することができるメソッドやプロパティがたくさん用意されています。

例えば、Chromeのコンソール画面で navigator.language と入力してみてください。

すると、このように今ブラウザを見ているユーザがどの言語が一番望ましいかを返してくれます。今は日本語で表示しているので “ja” が返ってきていますね。

このように様々ある navigator プロパティの一つが clipboard です。その名の通り、クリップボードの情報を読み書きすることができるオブジェクトです。

なので Clipboard オブジェクト内の writeText() メソッドを使うことでクリップボードの中身が書き代わり、コピーをした状態と同じになったというわけです!

この記事のまとめ

clipboardへの貼り付けを導入に、navigatorについても学習しました。こうやって芋づる式に知識を増やしていくと自分のためになりますね!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA