クリックでクリップボードにコピーする方法【HTML＆JavaScript】
普段何かとよく使うコピー機能ですが、長い文のコピーやスマホでコピーする場合はとても面倒です。またctrl+Aやcommand+Aなどで全選択しようとしても、ほとんどの場合は他の部分も選択されてしまいます。
そんなわけで今回は「クリックするだけでクリップボードに自動でコピーする方法」を紹介します。技術的なブログで自動でコードをコピーできると、とても便利なので使ってみてください。
実際に使ってみる
Test
完成すると、こんな感じになります。
copyと書かれたボタンを押してみてください。自動でクリップボードに「Test」とコピーされると思います。試しに下の入力欄にペーストしてみてください。
＊ブログ移行につき動作しなくなってしまったので、デモを見たい場合は下のページをどうぞ。
DEMO : koblog.github.io/demo2.html
コード
<p><span class="js-copytext">コピーしたい内容</span></p>
<p><button class="js-copybtn">ボタン</button></p>
<script>
var copyEmailBtn = document.querySelector('.js-copybtn');
copyEmailBtn.addEventListener('click', function(event) {
// テキストを選択
var copyText = document.querySelector('.js-copytext');
var range = document.createRange();
range.selectNode(copyText);
window.getSelection().addRange(range);
try {
// クリップボードにコピーする
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copy command was ' + msg);
alert('コピーしました');
} catch(err) {
console.log('Oops, unable to copy'); }
// 選択状態を解除する
window.getSelection().removeAllRanges();});
</script>上のコードを<body>内の任意の場所に記述します。はてなブログの場合は「HTML編集」に書いてください。コピーした時のダイアログを変えたい場合はalert('')の中の文字を変更してください。今後は僕のブログ内でも導入できればと思います。
＊追記
はてなブログだと反映されないかもしれません。
その場合は<script>タグに（type=”text/javascript”）を入れてみてください。
<script type="text/javascript">
〜〜〜
</script>
