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

2020-08-08

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

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

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

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



HTML

<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>
CSS

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

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




HTML

<textarea id="copy2" readonly>
コピーしたい長いテキスト
</textarea>
<button onclick="cp()">コピー</button>
<script> function cp(){ var txt = document.getElementById("copy2"); 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 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>
HTML(長いテキスト用)

<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>
CSS(共通)

.hidden{
  position: absolute;
  opacity:0;
}
button:focus{
  outline: 0; 
}

コピーボタンの仕組み

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

HTML

<input <span class="b">id="copy"type="text" value="コピーしたいテキスト" readonly>
<button <span class="b">onclick="cp()"</span>>コピー</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タグでテキストを指定しています。

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

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

CSS

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

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

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

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

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

コピーボタンだけを表示したい場合は、CSSでテキスト部分を非表示にすることもできます。

CSS(共通)

.hidden{
  position: absolute;
  opacity:0;
}

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

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

SHARE

このサイトについて

「Web Work Plus」はWEB制作・ビジネスのちょい足し情報メデイアです。ちょっとしたハテナをプラスに変える役立つ備忘録を発信中!