クリップボードにJavaScriptでテキストをコピーする方法

クリップボードにJavaScriptでテキストをコピーする方法

PCやスマホを使ってる人は、テキスト選択してコピーすればよいだけなのですが、それをJavaScriptを使ってやる方法です。

1.クリップボートにコピーする対象のテキストclass=cliptxtを用意(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>

2.コピーする対象テキストclass=cliptxtタグを記述(HTMLの記述例)

※class=cliptxtタグ内にあるテキストがコピーされます。
 必要に応じて書き換えてください。

<div align="center">以下のグレーエリアをクリックしてみてください。</div>

<div class="cliptxt">ココのエリアのテキストをクリップボードにコピーします</div>

<div align="center">グレーエリアをクリック後、メモ帳か何かを開いてペースト(キーボードの「Ctrl」+「V」)を行ってみてください。</div>

3.読み込むJsファイルとJavaScritpの記述

class=cliptxtタグをクリックしたタイミングで、textareaタグを追加し、クリックエリアのテキストを設定します。
そのtextareaを選択(select)してクリップボートにコピーします。
コピーするために「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デモ

※流用される場合は自己責任でお願いします。Googleアナリティクスタグは流用しないで下さい。