「クリップボードにコピー」ボタンをjsで実装してみた
Web2017年8月25日
あまり実案件で活用することはないかもしれませんが、社内で生成したソースをワンクリックでコピーできるよう、jsで「クリップボードにコピー」ボタンを作ってみました。備忘録も兼ねて本記事では「クリップボードにコピー」ボタンを設置するスクリプトをご紹介させていただきたいと思います。
サンプルコード
js
$(function(){
'use scrict';
function execCopy(string){
var temp = document.createElement('textarea');
temp.value = string;
temp.selectionStart = 0;
temp.selectionEnd = temp.value.length;
var s = temp.style;
s.position = 'fixed';
s.left = '-100%';
document.body.appendChild(temp);
temp.focus();
var result = document.execCommand('copy');
temp.blur();
document.body.removeChild(temp);
return result;
}
$('#hoge_btn').click(function(){
if(execCopy($('#hoge').text())){
alert('コピーできました');
}
else {
alert('このブラウザでは対応していません');
}
return false;
});
});- ※jQueryを読み込んでいる場合のスクリプトとなります
html
<textarea id="hoge">ほげほげほげほげほげほげほげほげほげほげほげほげほげほげ
もげもげもげもげもげもげもげもげもげもげもげもげもげもげ
ふがふがふがふがふがふがふがふがふがふがふがふがふがふが
もがもがもがもがもがもがもがもがもがもがもがもがもがもが
ふげふげふげふげふげふげふげふげふげふげふげふげふげふげ</textarea>解説
以下のページでご紹介されているスクリプトを流用させていただきました。
function execCopy～の関数を対象のセレクタに対して実行することでクリップボードにコピーすることができます。サンプルでは「#hoge_btn」のクリック時に「#hoge」に対して関数execCopyを実行してクリップボードにコピーできるようにしています。またコピーできたとわかるよう、alertで「コピーできました」と表示しています。
コピー元をtextareaにしておくのがポイントで、textareaでなくとも実装は可能ですが、その場合改行が含まれず全て1行につながってしまうため、クリップボードのコピー元はtextareaにしておくとよいです。
デモ
実際に動作を確認できるデモページも公開しておりますのであわせてご確認ください。
まとめ
あまり実案件では活躍することのないスクリプトかもしれませんが、必要になった場合に関数1つで簡単に実装できますので、もし必要なシーンがありましたらご活用いただければ幸いです。