【jQuery】テキストボックスの値をクリップボードにコピーするやり方を解説

こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在4社経験している、11年目エンジニアです。

この記事では、 jQueryでテキストボックスの値をクリップボードにコピーするやり方を

  • テキストボックスの値をクリップボードにコピーするサンプルプログラム
  • サンプルプログラムの解説

と、丁寧に解説していきます。

前提条件:実行環境について

実行環境は以下の通りです。

OS Windows10

クリップボードにコピーするためにclipboard.jsというjQueryのプラグインを使います。
ダウンロードと基本的な使い方については、こちらの記事をご参考ください。

テキストボックスの値をクリップボードにコピーするサンプルプログラム

サンプルプログラムでは

  • HTML
  • clipboard.jsライブラリ
  • JavaScript

の計3つを使います。

解説で使うサンプルプログラムのディレクトリ構造は以下のようになっています。
クリップボードにコピーするサンプルプログラム

HTMLサンプルプログラム

JavaScriptサンプルプログラム

実行結果

作成したHTMLをブラウザで開くと、以下のように表示されます。
jQueryでクリップボードにコピーする実行確認

テキストボックスに「サンプル」と入力し、【ボタンを押すとコピー】ボタンを押します。
jQueryでクリップボードにコピーする実行確認

「クリップボードにコピーしました。」とアラートが表示されたのでクリップボードにコピーできました。
jQueryでクリップボードにコピーする実行確認

本当にクリップボードにコピーできたか確認するためテキストに貼り付けます。
クリップボードにコピーできていることを確認できました。
jQueryでクリップボードにコピーする実行確認

サンプルプログラムの解説

サンプルプログラムのテキストボックスからクリップボードにコピーする箇所を解説をします。

【data-clipboard-target】は、指定したセレクタの要素に紐づく値を取得することができます。
ボタンに

とすることでidが「sampleInput」の要素の値を取得するように指定しています。
なのでボタンを押すことで

のテキストボックスの値が取得できます。

まとめ:テキストボックスの値をクリップボードにコピーしてみよう

以上がテキストボックスの値をクリップボードにコピーするやり方についての解説でした!

あなたのご参考になったのなら、とても嬉しいです(*´▽`*)
ではでは~(・ω・)ノシ

コメント

タイトルとURLをコピーしました