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

jQueryのコピー

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

かかかず
かかかず

余談ですが、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を操作しています。

この部分は以下の記述で、このaddClassremoveClass を一緒にくっつけてしまうと、クリックで瞬時に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
カテゴリーのイラスト

同じカテゴリの記事一覧

ボタンの影