【javascript】
シンプルなコピーボタンの作り方
サンプルコードなどをありがたく使わせていただくとき、コピーボタンがあると一瞬で持ち帰ることが出来て便利ですよね。
ここでは、わずか数行のjava scriptで実装できる、シンプルな「コピーボタン」の作り方を見ていきます。
短いテキスト用のコピーボタン
<input id="copy1" type="text" value="コピーしたいテキスト" readonly>
<button onclick="cp()">コピー</button>
<script>
function cp(){
var txt = document.getElementById("copy1");
txt.select();
document.execCommand("Copy");
}
</script>
input:focus,button:focus{
outline: 0;
}
::moz-selection{
background: none;
}
::selection{
background: none;
}
長いテキスト用のコピーボタン
<textarea id="copy2" readonly>
コピーしたい長いテキスト
</textarea><br>
<button onclick="cp()">コピー</button>
<script>
function cp(){
var txt = document.getElementById("copy2");
txt.select();
document.execCommand("Copy");
}
</script>
textarea{
resize: none;
width: 300px;
height: 100px;
}
textarea:focus,button:focus{
outline: 0;
}
::moz-selection{
background: none;
}
::selection{
background: none;
}
ボタンだけのコピーボタン
<div class="hidden">
<input id="copy3" type="text" value="コピーテキスト" readonly>
</div>
<button onclick="cp()">コピーボタン（短いテキスト）</button>
<script>
function cp(){
var txt = document.getElementById("copy3");
txt.select();
document.execCommand("Copy");
}
</script>
<div class="hidden">
<textarea id="copy4" readonly>
長いコピーテキスト
</textarea>
</div>
<button onclick="cp()">コピーボタン（長いテキスト）</button>
<script>
function cp(){
var txt = document.getElementById("copy4");
txt.select();
document.execCommand("Copy");
}
</script>
.hidden{
position: absolute;
opacity:0;
}
button:focus{
outline: 0;
}
コピーボタンの仕組み
コピーボタンを作る前準備として、
①コピーしたいテキストを収めた要素にIDを付与しておき、
②コピー関数を呼び出すためのボタンを設置します。
<input id="copy" type="text" value="コピーしたいテキスト" readonly>
<button onclick="cp()">コピー</button>
java scriptでのコピーの仕組みは、
①テキストの内容を取得して変数に代入
②取得したテキストを選択
③選択したテキストをクリップボードにコピーする
という動作をしています。
function cp(){
var txt = document.getElementById("copy");
txt.select();
document.execCommand("Copy");
}
これだけで、「指定したテキストをクリップボードにコピーする」コピーボタンが実装できます。
java script部分はjsファイルに分けても良いですし、HTMLファイルの端っこに直接書いてもOKです。
短いテキストの場合は、inputタグのvalue値で、コピーさせたいテキストを指定しています。
長いテキストの場合は、textareaタグでテキストを指定しています。
CSSに分けた部分では、細かい指定をしているだけで、ぱっとみのデザインには関係ありません。
CSSで指定しているのは2つ。
/*枠線打ち消し*/
input:focus,button:focus{
outline: 0;
}
/*選択色打ち消し*/
::moz-selection{
background: none;
}
::selection{
background: none;
}
1つはコピーボタンを押した時に、ボタンとテキストエリアに出てくる枠線を打ち消す指定。
もう1つは、コピーボタンでテキストが選択された時に、出てくる青色を打ち消す指定です（「::moz-selection」はmoz系ブラウザ用の指定です）。
細かい部分なので、お好みで使ってみてください。
コピーボタンだけを表示したい場合は、CSSでテキスト部分を非表示にすることもできます。
.hidden{
position: absolute;
opacity:0;
}
テキストの入った要素に直接指定すると上手く動作しないので、div要素で囲み、div要素に対して非表示指定するのがポイント。
「display: none;」だとうまく動作しなかったので、ここでは「position: absolute;」で別レイヤーに分けて「opacity: 0;」で透明にする事で「非表示」としています。
