【javascript】
シンプルなコピーボタンの作り方

2020-08-08

サンプルコードなどをありがたく使わせていただくとき、コピーボタンがあると一瞬で持ち帰ることが出来て便利ですよね。

ここでは、わずか3行のjava scriptで実装できる シンプルな「コピーボタン」の作り方を見ていきます。

\項目をタップするとジャンプできます/

短いテキスト用のコピーボタン



HTML

<input id="copy" type="text" value="コピーしたいテキスト" readonly>
<button onclick="cp()">コピー</button>

<script> function cp(){ var txt = document.getElementById("copy"); txt.select(); document.execCommand("Copy"); } </script>
CSS

input:focus,button:focus{
  outline: 0; 
}
::moz-selection{
  background: none;
}
::selection{
  background: none;
}

長いテキスト用のコピーボタン




HTML

<textarea id="copy2" readonly>
コピーしたい長いテキスト
</textarea><br>
<button onclick="cp()">コピー</button>

<script> function cp(){ var txt = document.getElementById("copy"); txt.select(); document.execCommand("Copy"); } </script>
CSS

textarea{
  resize: none;
  width: 300px;
  height: 100px;
}
textarea:focus,button:focus{
  outline: 0; 
}
::moz-selection{
  background: none;
}
::selection{
  background: none;
}

ボタンだけのコピーボタン



HTML

<div style="position: absolute; opacity:0;">
<input id="copy" type="text" value="コピーボタン" readonly>
</div>
<button onclick="cp()">コピーボタン</button>

<script> function cp(){ var txt = document.getElementById("copy"); txt.select(); document.execCommand("Copy"); } </script>
CSS

button:focus{
  outline: 0; 
}

コピーボタンの仕組み

コピーボタンを作る前準備として、
①コピーしたいテキストを収めた要素にIDを付与しておき、
②コピー関数を呼び出すためのボタンを設置します。

HTML

<input id="copy" type="text" value="コピーしたいテキスト" readonly>
<button onclick="cp()">コピー</button>

java scriptでのコピーの仕組みは、

①テキストの内容を取得して変数に代入
②取得したテキストを選択
③選択したテキストをクリップボードにコピーする

という動作をしています。

java script

function cp(){
  var txt = document.getElementById("copy");
  txt.select();
  document.execCommand("Copy");
}

これだけで、「指定したテキストをクリップボードにコピーする」コピーボタンが実装できます。

java script部分はjsファイルに分けても良いですし、HTMLファイルの端っこに直接書いてもOKです。

短いテキストの場合は、inputタグのvalue値で、コピーさせたいテキストを指定しています。

長いテキストの場合は、textareaタグでテキストを指定しています。

コピーボタンだけを表示したい場合は、テキスト部分を非表示にするstyleを指定しています。

テキストの入った要素に直接指定すると上手く動作しないので、div要素で囲み、div要素に対して非表示用のstyleを指定しています。

「display: none;」だとうまく動作しなかったので、「position: absolute;」で別レイヤーに分けて「opacity: 0;」で透明にする事で「非表示」としています。

また、CSSに分けた部分では、細かい指定をしているだけで、ぱっとみのデザインには関係ありません。

CSSで指定しているのは2つ。

CSS

/*枠線打ち消し*/
input:focus,button:focus{
  outline: 0; 
}

/*選択色打ち消し*/ ::moz-selection{ background: none; } ::selection{ background: none; }

1つはコピーボタンを押した時に、ボタンとテキストエリアに出てくる枠線を打ち消す指定。

もう1つは、コピーボタンでテキストが選択された時に、出てくる青色を打ち消す指定です(「::moz-selection」はmoz系ブラウザ用の指定です)。

細かい部分なので、お好みで使ってみてください。