2019年6月10日ツイートシェアB!はてブポケットテキストをクリップボードにコピーできるjQueryプラグイン「clipboard.js」を紹介します。実装すると以下のような処理ができるようになります!DEMO(デモ)ここの文字がコピーされます。2.0.4時点の内容です。ZIP」からダウンロードしてください。使い方ライブラリを読み込むjQueryに依存しますので、先にjQueryを読み込んでください。src="dist/clipboard.min.js"></script>表示させるアイテムコピーする対象となる要素と、クリップボードへのコピーを発動させる要素を用意します。id="clipboard-target">ここの文字がコピーされます。data-clipboard-target="#clipboard-target">コピー</button>data-clipboard-targetにコピーする対象となる要素のidを指定してあげてください。ClipboardJS('.btn-clipboard');実装はとてもシンプル。トリガーとなる要素を指定するだけです。【おまけ】clipboard.jsの実装コピーしたことが分かるようなアクションがほしいですよね。clipboard.jsにはコピーの成功、失敗を受け取る関数が存在します。こちらを使うことでコピーが成功した時に、「成功したよ」と知らせることができます。コピーが成功した時に、テキストを数秒だけ表示させる処理を実装しました。id="clipboard-target">ここの文字がコピーされます。@haniwa008要素の値をクリップボードにコピーできる「clipboard.js」の紹介でした。簡単に実装できるので、ぜひお試しください。リンクjQueryライブラリこのページが役に立ったらいいね!お願いします運営の励みになります...。色の指定が自由自在!カラーピッカーを出現させるjQueryプラグイン...前の記事PCサイトのレスポンシブ化で横揺れさせない3つのポイントはにわまんWordPressが好きなフリーのWebコーダー。300件以上のWordPressカスタマイズを対応してきました。