JavaScriptのdocument.execCommand()を使ってクリップボードにテキストをコピーする方法をご紹介します。
PCやスマホを使ってる人はテキスト選択してコピーすればよいだけなのですが、それをJavaScriptを使ってみました。
Contents
ディスプレイ広告
クリップボートにコピーする対象のテキストエリア(.cliptx)のCSS記述
※このCSSの記述は重要では無いので、必要に応じて書き換えてください。
クリップボートにコピーする対象のテキストclass=cliptxtを用意します。
<style> body{ font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",Arial,sans-serif; padding: 0; margin: 0; overflow-x: hidden; } ol, ul { list-style: none; margin: 0; padding: 0; } img { vertical-align: bottom; -webkit-backface-visibility: hidden; } h1{ font-size:18px; line-height:1.6em; text-align:center; font-weight:normal; padding:10px 0; } .cliptxt{ width: 400px; height: 100px; background-color: #cccccc; border: solid 2px #777777; text-align: center; line-height: 100px; margin: 30px auto; } </style>
クリップボートにコピーする対象のテキストエリア(class=”cliptxt”)のHTML記述
※class=”cliptxt”タグ内にあるテキストがコピーされます。必要に応じて書き換えてください。
<h1>クリップボードにテキストをコピーするJavaScriptデモページです。</h1> <div align="center">以下のグレーエリアをクリックしてみてください。</div> <div class="cliptxt">ココのエリアのテキストをクリップボードにコピーします</div> <div align="center">グレーエリアをクリック後、メモ帳か何かを開いてペースト(キーボードの「Ctrl」+「V」)を行ってみてください。</div>
document.execCommand()を使ってクリップボードにテキストをコピーするJavaScritpの記述
※jquery.min.jsファイルを読み込みます。テキストエリア(.cliptx)をクリックしたタイミングでtextareaタグを追加し、クリックエリアのテキストをtextareaのvalueとして設定します。
そのtextareaを選択(select)状態にしてdocument.execCommand(‘copy’)を実行しクリップボートにコピーします。
コピーするために「textareaタグを追加」して「textareaを選択」する必要があります。
<script src="jquery.min.js"></script> <script type="text/javascript"> $(function () { $(".cliptxt").on("click", function() { var text = $(this).text(); $(this).append('<textarea class="clipbtextarea">' + text + '</textarea>'); $('.clipbtextarea').select(); document.execCommand('copy'); $('.clipbtextarea').remove(); alert('[' + text + ']テキストをコピーしました。'); }); }); </script>
クリップボードにテキストをコピーするJavaScriptデモページ
クリップボードにテキストをコピーするJavaScriptデモ
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい