JavaScriptでクリップボードにテキストをコピー【.execCommand】｜DAD UNION

JavaScriptのdocument.execCommand()を使ってクリップボードにテキストをコピーする方法をご紹介します。
PCやスマホを使ってる人はテキスト選択してコピーすればよいだけなのですが、それをJavaScriptを使ってみました。

Contents

クリップボートにコピーする対象のテキストエリア（.cliptx）のCSS記述
コピーする対象のテキストエリア（class=”cliptxt”）のHTML記述
document.execCommand()を使ってクリップボードにテキストをコピーするJavaScritpの記述
クリップボードにテキストをコピーするJavaScriptデモページ

クリップボートにコピーする対象のテキストエリア（.cliptx）のCSS記述

※このCSSの記述は重要では無いので、必要に応じて書き換えてください。
　クリップボートにコピーする対象のテキストclass=cliptxtを用意します。

<style>
body{
	font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",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>