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アナリティクスタグは流用しないで下さい
ディスプレイ広告
ディスプレイ広告