コピーボタン付きテキストボックスを作る方法
コピーボタン付きテキストボックスをHTML・CSS・JavaScriptで作る方法を紹介します。このサンプルでは、テキストボックスの右側に配置した「コピー」ボタンをクリックすると、表示されている文字列がクリップボードへ保存されます。コピーが完了するとボタンの文字が一時的に「コピーしました」へ変わるため、操作結果も分かりやすく確認できます。
注文番号、会員ID、招待コード、クーポンコード、振込先情報など、利用者が別の画面へ貼り付ける文字列を表示する場面で活用できます。文字列をドラッグして選択する必要がなく、ボタンを押すだけでコピーできるため、スマートフォンやタブレットでも扱いやすい入力欄を作成できます。
サンプルでは内容を変更できない読み取り専用テキストボックスを使用しています。HTMLでは表示する文字列やボタン名を変更でき、CSSでは入力欄やボタンの色、幅、角丸、余白を調整できます。JavaScriptではコピー完了後に表示するメッセージや、元のボタン表示へ戻るまでの時間を変更できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
「コピー」をクリックすると注文番号がクリップボードへ保存され、コピー完了メッセージが表示されます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン表示対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>コピーボタン付きテキストボックス</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 注文番号コピー全体 -->
<div class="copy-button-textbox_wrap">
<!-- タイトル -->
<h1 class="copy-button-textbox_title">
注文番号をコピー
</h1>
<!-- 説明文 -->
<p class="copy-button-textbox_text">
「コピー」をクリックすると、注文番号をクリップボードへ保存できます。
</p>
<!-- 注文番号のラベル -->
<label
class="copy-button-textbox_label"
for="order-number">
注文番号
</label>
<!-- テキストボックスとコピーボタンを並べるエリア -->
<div class="copy-button-textbox_box">
<!-- コピーする注文番号 -->
<input
class="copy-button-textbox_input"
id="order-number"
name="order-number"
type="text"
value="ORDER-20260724-001"
readonly>
<!-- 注文番号をコピーするボタン -->
<button
class="copy-button-textbox_button"
id="copy-button"
type="button">
コピー
</button>
</div>
<!-- コピー結果を表示するメッセージ -->
<p
class="copy-button-textbox_message"
id="copy-message"
aria-live="polite">
</p>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成された、コピーボタン付きテキストボックスです。表示している文字列をワンクリックでクリップボードへコピーでき、コピー完了後はボタン表示とメッセージが一時的に変化します。HTMLでは表示内容を設定し、CSSではレイアウトやデザインを調整し、JavaScriptではコピー処理と完了メッセージを制御します。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.html
タイトル、説明文、テキストボックス、コピーボタン、コピー完了メッセージを配置します。コピーする文字列はvalue属性を書き換えるだけで変更できます。
style.css
テキストボックス、ボタン、メッセージ、レイアウトのデザインを管理します。背景色、文字色、余白、角丸、横幅などを変更できます。
script.js
コピーボタンをクリックした時のコピー処理、コピー完了メッセージの表示、ボタン表示の切り替え、一定時間後に元へ戻す処理を管理します。
設置方法・使い方
sampleフォルダへ3ファイルを配置します。
ブラウザで sample/index.html を開くと利用できます。
「コピー」ボタンをクリックすると、テキストボックス内の文字列がクリップボードへコピーされます。
カスタマイズできる内容
index.htmlではタイトル、説明文、ラベル、コピー対象の文字列を変更できます。
style.cssでは入力欄やボタンの色、角丸、余白、横幅、文字サイズなどを変更できます。
script.jsではコピー完了後に表示するメッセージやボタンの文字を自由に変更できます。
数値調整
style.css
max-width:700px;
全体の最大横幅です。値を大きくすると横幅が広くなり、小さくするとコンパクトになります。
padding:32px;
コンテナの内側余白です。値を変更すると全体の余白が変わります。
padding:12px 14px;
テキストボックスの内側余白です。値を変更すると文字と枠線の間隔が変わります。
min-width:110px;
コピーボタンの最小横幅です。値を大きくするとボタンが横長になります。
font-size:22px;
タイトルの文字サイズです。値を変更するとタイトルの大きさが変わります。
font-size:16px;
ラベル、テキストボックス、ボタンの文字サイズです。値を変更すると表示サイズが変わります。
border-radius:18px;
全体コンテナの角丸です。値を大きくすると丸みが強くなります。
border-radius:8px;
テキストボックスとボタンの角丸です。値を変更すると見た目が変わります。
transition:0.3s;
ボタンや入力欄の色が切り替わる時間です。0.3秒で変化し、値を大きくするとゆっくり、小さくすると速くなります。
script.js
setTimeout(...,2000);
2000は2秒を表します。値を変更すると「コピーしました」表示を維持する時間が変わります。
レスポンシブ対応
style.cssではwidth:100%、max-width:700px、@media (max-width:640px)を使用しています。画面幅が狭い場合はテキストボックスとボタンを縦並びへ変更し、スマートフォン・タブレット・PCでも操作しやすいレイアウトになります。
コメント