JavaScript数行でコピーボタン実装の手順とかコード

タイトルの通り

JavaScriptだけで次をしたいです。

• なんか入力欄・テキスト要素とかある

• その横とか下にコピーボタンを配置

• それを押したらクリップボードにコピー

• ついでにコピー要素も選択する

こういうのはjQueryを使うと楽です。

でもJavaScriptだけでも数行でできたので、
その方法とかコードを適当にまとめときます。

コピー要素とコピーボタンを作成

ここでは次のようなシンプルな構成を想定。

▼ こんなHTML構成

<input type="text" id="copyMe" class="_width100"
            placeholder="なんか入力してみて"  />
<button id="btnCopy" class="_disabled _width100 _indigo h5">
  コピーする
</button>

ここではこういう見た目にしました。

▼ レイアウトとかは適当に

まだコピーするボタンを押しても何も起きません（当然）

テキストコピーのJavaScriptコード追加

あとは数行のコード追加するだけです。

▼ IDとかは各自で変更

const $copyMe = document.getElementById('copyMe');
const $btnCopy = document.getElementById('btnCopy');

$btnCopy.onclick = (e)=>{
  /// コピー対象のテキスト取得
  const text = $copyMe.value;
  /// テキスト要素を全て選択
  window.getSelection().selectAllChildren($copyMe);
  /// もしコピー要素が入力欄だったら…
  /// window.getSelection().selectAllChildren(
  /// $copyMe.closest('div'));
  /// クリップボードにコピー
  navigator.clipboard.writeText(text);
};

▼ コピーボタン押下した時の様子

こういう感じで数行で実装できちゃいます。

ちなみにコピーにexecCommandは非推奨

上記コードの以下の部分

▼ クリップボードにテキストコピー

  /// クリップボードにコピー
  navigator.clipboard.writeText(text);

ここは昔はexecCommand()とか使うことがありました。

▼ こんな感じのコード

/// 現在選択テキストをコピー
document.execCommand('copy');

これは非推奨APIなので使わない方がいいです。

▼ 以下のMDNリファレンスでも警告されてる

非推奨: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

https://developer.mozilla.org/ja/docs/Web/API/Document/execCommand

これを見て恐ろしいのは「突然動作しなくなる可能性」とか書いてあることです。どこまで本気か分からないけど、突然動作しなくなる覚悟で使えと書いてあります。

※ 多分影響が大きすぎるから削除と蚊はないと思う

でも使わない方が賢明かもしれません。

コピーボタン実装は意外と難しくない

こういう細々した処理はjQuery使った方が楽です。

ブログの方でもjQueryでコピーボタンを実装する、
みたいな記事を書いたことがあります。（noteとは別の運営ブログのこと）

でもJavaScriptだけでも十分簡単に実装できたので、
せっかくならブログじゃなくてnoteに残しておこうと書きました。

コピーボタン実装はJS・jQueryどっちでも簡単です。