jQueryでテキストをクリップボードへコピーするスニペット

8分

jQueryのコピー

SHARE

スニペットを公開しているサイトでよく見かける「ワンクリックで任意のテキストがコピーできる」。この記事は、そんなことができるスニペットです。

かかかず
かかかず

余談ですが、vimeoでパスワードロックをかけた動画埋め込みをしたページへ設置したコード一式です。

パスワード以外でも使えるので、コピー用のフィールドを検討している方はぜひ最後までご覧頂き、コピペして使ってください。

デザインサンプル

早速デザインサンプルです。

「ここにパスワード」のテキストを、水色の「コピー」のボタンをクリックすることでテキストをコピーできます。そして、コピーの選択後ボタンの色が変わり、1秒後に色が戻るボタンです。

以下のパスワードをコピペください。

かかかず
かかかず

ドラッグしてコピーする必要がないので、ユーザーライクなUIです。

実装の手順と方法

基本、コピペでOKですがSTEP.1のjQuery本体がないと動かないので、ご注意ください。

jQuery本体の読み込み

jQuery本体の組み込みが必要です。

jQueryは既に<head>〜</head> の中で読み込まれていれば問題ありませんが、ない場合は以下の記事を参考にして、jQuery本体をHTMLファイルに書き込みましょう。

関連記事 jQueryのインストール方法

HTMLをコピペ

設置したい場所に、HTMLをコピペします。

HTML 

<div class="moviepass_area">
  <p>以下のパスワードをコピペください。</p>
  <div class="moviepass_inner"> <textarea id="js-copytext" readonly>ここにパスワード</textarea> <button type="button" id="js-copybtn">コピー</button> </div>
</div>

コピペの対象にしたいテキストは、「ここにパスワード」の部分に記述しましょう。

CSSをコピペ

HTMLの記述が終わったら、次にCSSをコピーして見た目を整えます。コードは結構な量ですが、そのままコピペでOKです。

CSS 

.moviepass_area {
    display: block;
    margin: 20px auto 20px;
    padding: 20px 20px 0;
}
.moviepass_area p {
    color: #2165c0;
    font-size: 1.4rem;
    font-weight: 500;
    text-align: center;
	 margin-bottom: 15px;
	 line-height: 1.6;
}
.moviepass_inner {
    display: flex;
    width: 450px;
    margin: 0 auto;
    background: #F0F0F0;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
    flex-wrap: wrap;
    border-radius: 3px;
    position: relative;
}
.moviepass_inner:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -10px;
    border: 10px solid transparent;
    border-top: 10px solid #f0f0f0;
}
textarea#js-copytext {
    width: 51%;
    background: #FFF;
    text-align: center;
    height: 2.3rem;
    padding: 0px;
    line-height: 2.1;
    resize: none;
    letter-spacing: 0.08rem;
    font-size: 1.1rem;
    margin-right: 10px;
    min-height: auto;
    margin-bottom: 0;
}
button#js-copybtn {
    width: 33%;
    text-align: center;
    background: #6bb6ff;
    height: 2.3rem;
    line-height: 2.3rem;
    color: #FFF;
    border-radius: 3px;
    box-shadow: 0 1px 8px rgb(0 0 0 / 11%);
    align-items: center;
    transition: 0.2s ease-in-out;
    position: relative;
    border: none;
}
button#js-copybtn:hover {
    opacity: 0.8;
}
button#js-copybtn:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 100;
    font-size: 1em;
    content: "\f24d";
    padding-left: 8px;
    color: #cae1ff;
}
button#js-copybtn.active {
    background: #fff;
    color: #2165c0;
    outline: auto;
    outline-color: #6bb6ff;
    justify-content: center;
}

@media only screen and (max-width: 480px) {
	.manual_moviebox {
		margin: auto -4%;
	}
	.moviepass_area {
    padding-left: 4%;
	 padding-right: 4%;
	}
	.moviepass_inner {
    flex-direction: row;
    width: 100%;
	}
	.moviepass_area p {
    font-size: 1.2rem;
    line-height: 1.5;
	}
	textarea#js-copytext {
    width: 58%;
	}
}

かかかず
かかかず

色味などの見た目は、この中のCSSをいじりましょう。

jQueryのコピペ

最後にjQueryのコードをコピペします。

<body>〜</body> の中のクロージングタグ直前に記述しましょう。

jQuery 

$(function () {
  $('#js-copybtn').on('click', function () {
    $('#js-copytext').select();
    document.execCommand('copy');
    $("#js-copybtn").addClass('active').delay(1000).queue(function (next) {
      $(this).removeClass('active');
      next();
    });
  });
});

かかかず
かかかず

これで完成です。

コピペ用コード一式

前述のコードと一緒ですが、コピペ用のHTML・CSS・jQueryのコード一式です。

コードを表示する

HTML 

<div class="moviepass_area">
  <p>以下のパスワードをコピペください。</p>
  <div class="moviepass_inner"> <textarea id="js-copytext" readonly>ここにパスワード</textarea> <button type="button" id="js-copybtn">コピー</button> </div>
</div>

CSS 

.moviepass_area {
    display: block;
    margin: 20px auto 20px;
    padding: 20px 20px 0;
}
.moviepass_area p {
    color: #2165c0;
    font-size: 1.4rem;
    font-weight: 500;
    text-align: center;
	 margin-bottom: 15px;
	 line-height: 1.6;
}
.moviepass_inner {
    display: flex;
    width: 450px;
    margin: 0 auto;
    background: #F0F0F0;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
    flex-wrap: wrap;
    border-radius: 3px;
    position: relative;
}
.moviepass_inner:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -10px;
    border: 10px solid transparent;
    border-top: 10px solid #f0f0f0;
}
textarea#js-copytext {
    width: 51%;
    background: #FFF;
    text-align: center;
    height: 2.3rem;
    padding: 0px;
    line-height: 2.1;
    resize: none;
    letter-spacing: 0.08rem;
    font-size: 1.1rem;
    margin-right: 10px;
    min-height: auto;
    margin-bottom: 0;
}
button#js-copybtn {
    width: 33%;
    text-align: center;
    background: #6bb6ff;
    height: 2.3rem;
    line-height: 2.3rem;
    color: #FFF;
    border-radius: 3px;
    box-shadow: 0 1px 8px rgb(0 0 0 / 11%);
    align-items: center;
    transition: 0.2s ease-in-out;
    position: relative;
    border: none;
}
button#js-copybtn:hover {
    opacity: 0.8;
}
button#js-copybtn:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 100;
    font-size: 1em;
    content: "\f24d";
    padding-left: 8px;
    color: #cae1ff;
}
button#js-copybtn.active {
    background: #fff;
    color: #2165c0;
    outline: auto;
    outline-color: #6bb6ff;
    justify-content: center;
}

@media only screen and (max-width: 480px) {
	.manual_moviebox {
		margin: auto -4%;
	}
	.moviepass_area {
    padding-left: 4%;
	 padding-right: 4%;
	}
	.moviepass_inner {
    flex-direction: row;
    width: 100%;
	}
	.moviepass_area p {
    font-size: 1.2rem;
    line-height: 1.5;
	}
	textarea#js-copytext {
    width: 58%;
	}
}

jQuery 

$(function () {
  $('#js-copybtn').on('click', function () {
    $('#js-copytext').select();
    document.execCommand('copy');
    $("#js-copybtn").addClass('active').delay(1000).queue(function (next) {
      $(this).removeClass('active');
      next();
    });
  });
});

ざっくりとしたコードの解説

ざっくりとしたコードの解説です。

それぞれHTML・CSS・jQueryをちょっとカスタマイズをして使う場合や、構造を知りたい方はご覧ください。

HTML：readonly でテキストボックスを読み取り専用に

パスワードを設置しているのは textarea のHTMLタグです。このHTMLタグに readonly を記述しておくと、テキストの削除や書き換えができない「読み取り専用」にできます。

HTML 

<textarea id="js-copytext" readonly>ここにパスワード</textarea>

かかかず
かかかず

ここの部分のテキストを誤って消してしまった場合、ユーザーはページのリロードが必要なので、readonlyを書いておくと親切です。

CSS：resize で可変のtextareaに

HTMLタグの textarea のデフォルトは可変です。

ユーザーが好きなようにサイズを変更できて便利ですが、今回はユーザーが入力できるフィールドでもないので、resize: none; を記述しておくと、この可変を無効にできます。

CSS 

textarea#js-copytext {
    resize: none;
}

jQuery

jQueryのコードについてざっくりと解説します。

addClass と removeClass でclassを書き換え

jQueryのaddClass の追加と removeClass の削除を使って、クリック後#js-copybtn のclassを操作しています。

この部分は以下の記述で、このaddClass と removeClass を一緒にくっつけてしまうと、クリックで瞬時にclassが追加・削除されてしまうので、.delay(1000) 後にqueue(function (next) を入れ、その後にclass削除の removeClass が動いています。

jQuery 

$("#js-copybtn").addClass('active').delay(1000).queue(function (next) {
      $(this).removeClass('active');
      next();

1秒に指定しているこの部分の.delay(1000) の数字を書き換えると、ディレイさせる秒数を変えられます。

document.execCommand(‘copy’);

テキストエリアをクリックしたときに、そのテキストエリアの値を select() で選択状態にして、document.execCommand(‘copy’) を実行してクリップボードにコピーします。

jQuery 

$(function () {
  $('#js-copybtn').on('click', function () {
    $('#js-copytext').select();
    document.execCommand('copy');
    $("#js-copybtn").addClass('active').delay(1000).queue(function (next) {
      $(this).removeClass('active');
      next();
    });
  });
});

非常に便利な機能ですが、MDN Web Docsによると「使用を避け、できれば既存のコードは更新してください。」と、 HTML5の Clipboard API の使用を推奨しています。

かかかず
かかかず

Clipboard APIの方が拡張性が高そうです。まだ使いこなせてないので勉強します・・。

参考サイト

参考Document.execCommand()MDN Web Docs

前の記事

ACFのラジオボタン
ラジオボタンの条件分岐と出力

次の記事

1年半使ってみたWordPressテーマSANGOの感想とレビ…

関連記事

カテゴリーのイラスト

同じカテゴリの記事一覧

ボタンの影

まとめ記事

Article

About

Summary

OTHER

DUB DESiGNはデザインをテーマにしたメディアです。Webデザインに関するHow-toや、WordPressのスニペットなど、デザインの話を中心に、仕事を楽しむすべての方を対象に記事を配信しています。

＞＞ 詳しくはこちら