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

この記事は約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文字を変えてコピーボタンを押してみてね!");
});
エンデ・バタローをフォローする
javascriptjQueryサイト制作

東京に住み始めて7年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30代(男)です。

フロントエンドを始めて7年目になります。
エディタはAtomからVSCodeに乗り換え、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
広告
初めてのブログ

コメント

タイトルとURLをコピーしました