jQueryでクリップボードにコピーする方法｜コピペ

2020年08月12日

この記事は約2分で読めます。

テキストをコピーする時、ユーザーに「Ctrl + c」とか「⌘ + c」とか求めても良いけど
「コピーする」ボタンがあったらちょー親切。
ソースを表示する時とか、何か文字を比較したり生成するジェネレーターを作るときは、「コピーする」ボタンを置いておこう！

DEMO

コピーする

HTML

<div class="demo1">
  <input type="text" placeholder="ここに文字を書いてね" value="サンプルテキスト" />
  <span>コピーする</span>
</div>

CSS

.demo1 {
  display:block;
  letter-spacing: -.4rem;
  font-size: 0;
}
.demo1 input, .demo1 span {
  padding: 11px 0;
  letter-spacing: normal;
  font-size: 18px;
  display: inline-block;
}
.demo1 input {
  width: 68%;
  margin-right: 2%;
  padding: 13px 6px;
}
.demo1 span {
  width: 30%;
  background: #0776dd;
  color: #fff;
  font-weight: bold;
  text-align: center;
  border-radius: 12px;
  box-shadow: 0 4px 12px -2px rgba(0,0,0,.4);
  cursor: pointer;
}

jQuery

$(".demo1 span").on("click", function() {
  // コピーするテキストを選択
  $(".demo1 input").select();
  // 選択したテキストをクリップボードにコピーする
  document.execCommand("Copy");
  // コピーを通知する
  alert("コピーできました！\nコピー内容：" + $(".demo1 input").val() + "\n文字を変えてコピーボタンを押してみてね！");
});