クリアボタン付きテキストボックスは、入力した文字をボタン1つで消去できる入力欄です。文字を選択して削除する必要がなく、入力内容を最初から書き直したいときに便利です。クリアボタンを押すと入力欄が空になり、そのまま新しい文字を入力できます。
今回は、クリアボタンの配置が異なる2種類の入力欄を紹介します。1つ目は、テキストフィールドの右端に「×」を配置した1行入力タイプです。2つ目は、テキストエリアの下に青い「クリア」ボタンを配置した複数行入力タイプで、改行を含む文章もまとめて消去できます。
どちらも入力した内容を文字列として取得でき、クリア後は空文字列になります。デモでは文字を入力したりクリアボタンを押したりしながら、取得した値・変数の内容・データ型がどのように変化するかを確認できます。
デモ
①は入力欄の右端にある「×」、②は入力欄の下にある「クリア」を押すと入力内容を消去できます。どちらもクリア後の値は空文字列となり、取得結果には「なし」と表示されます。データ型はstring（文字列）のままです。
コードをコピーして使おう！
① 1行入力（テキストフィールド）
<!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="clear-button-textbox_container">
<!-- 入力欄のラベル -->
<label class="clear-button-textbox_label" for="clear-button-textbox-first">
お名前
</label>
<!-- 入力欄とクリアボタンを重ねて配置する -->
<div class="clear-button-textbox_input-wrap">
<!-- 1行入力欄。idはクリア対象の指定にも使用する -->
<input class="clear-button-textbox_input" id="clear-button-textbox-first" name="name" type="text" placeholder="お名前を入力してください">
<!-- 入力内容を消去するボタン -->
<button class="clear-button-textbox_clear-icon" type="button" data-clear-target="clear-button-textbox-first" aria-label="お名前の入力内容をクリア">
×
</button>
</div>
</div>
<!-- クリアボタンのJavaScriptを読み込む -->
<script src="script.js"></script>
</body>
</html>② 複数行入力（テキストエリア）
<!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="clear-button-textbox_container">
<!-- 入力欄のラベル -->
<label class="clear-button-textbox_label" for="clear-button-textbox-second">
お問い合わせ内容
</label>
<!-- 改行を含む文章を入力できるテキストエリア -->
<textarea class="clear-button-textbox_textarea" id="clear-button-textbox-second" name="message" placeholder="お問い合わせ内容を入力してください"></textarea>
<!-- クリアボタンを入力欄の右下に配置する -->
<div class="clear-button-textbox_actions">
<!-- テキストエリアの入力内容を消去するボタン -->
<button class="clear-button-textbox_clear" type="button" data-clear-target="clear-button-textbox-second">
クリア
</button>
</div>
</div>
<!-- クリアボタンのJavaScriptを読み込む -->
<script src="script.js"></script>
</body>
</html>コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
今回のサンプルは、HTML・CSS・JavaScriptの3つのファイルで構成されています。HTMLでは入力欄とクリアボタンを配置し、CSSでは入力欄の外観やボタンの位置を調整しています。JavaScriptでは、クリアボタンをクリックしたときに入力内容を消去する処理を行います。
①の1行入力（テキストフィールド）と②の複数行入力（テキストエリア）は、それぞれ独立したサンプルとしてダウンロードできます。どちらもファイル構成は同じですが、入力欄の種類・クリアボタンの配置・デザインが異なります。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlには、入力欄のラベル、テキストフィールドまたはテキストエリア、クリアボタンを記述しています。style.cssでは、入力欄の横幅・余白・枠線・角丸・文字サイズや、クリアボタンの位置と色を設定しています。script.jsには、ボタンをクリックしたときに入力内容を消去するJavaScriptを記述しています。
設置方法・使い方
使用したいタイプの「サンプル一式をダウンロード」をクリックしてZIPファイルを保存し、展開してください。sampleフォルダ内のindex.html・style.css・script.jsを同じ階層に配置し、index.htmlをブラウザで開くと入力欄が表示されます。
①はお名前を入力して右端の「×」をクリックすると内容が消去されます。②はお問い合わせ内容を入力して下の「クリア」ボタンをクリックすると、改行を含む文章をまとめて消去できます。どちらも消去後は入力欄にフォーカスが戻るため、そのまま入力を再開できます。
クリア対象の入力欄を指定する方法
クリアボタンは、HTMLのdata-clear-target属性を使って消去する入力欄を指定しています。①のテキストフィールドでは、次のように入力欄のidとボタンのdata-clear-targetに同じ名前を設定しています。
<!-- 1行入力欄。idはクリア対象の指定にも使用する -->
<input class="clear-button-textbox_input" id="clear-button-textbox-first" name="name" type="text" placeholder="お名前を入力してください">
<!-- 入力内容を消去するボタン -->
<button class="clear-button-textbox_clear-icon" type="button" data-clear-target="clear-button-textbox-first" aria-label="お名前の入力内容をクリア">
×
</button>
id="clear-button-textbox-first"が入力欄の識別名で、data-clear-target="clear-button-textbox-first"が消去対象の指定です。この2つを一致させることで、ボタンをクリックしたときに対象の入力欄を取得できます。
②のテキストエリアでは、入力欄のidとボタンのdata-clear-targetにclear-button-textbox-secondを指定しています。識別名を変更する場合は、両方を同じ名前に変更してください。
入力内容を消去する仕組み
script.jsでは、クリアボタンをクリックしたときに対象の入力欄を取得し、valueプロパティへ空文字列を設定しています。①と②は同じ処理を使用しています。
// ボタンがクリックされたときの処理
button.addEventListener("click", function() {
// data-clear-targetに指定された入力欄を取得
const input = document.getElementById(button.dataset.clearTarget);
// 対象の入力欄が存在しない場合は処理を終了
if (!input) return;
// 入力内容を空文字列にする
input.value = "";
// 入力内容が変更されたことを通知する
input.dispatchEvent(new Event("input", { bubbles: true }));
// 入力欄にフォーカスを戻す
input.focus();
});
document.getElementById()で対象の入力欄を取得し、input.value = "";で入力内容を消去します。テキストフィールドでは1行の文字列、テキストエリアでは改行を含む文字列が消去されます。
dispatchEvent()は、JavaScriptによって入力内容が変更されたことをinputイベントとして通知する処理です。入力内容の変更を監視する別のJavaScriptがある場合にも、クリア操作を検知できるようにしています。最後のinput.focus()で入力欄へフォーカスを戻します。
入力した値を取得する方法
テキストフィールドとテキストエリアは、どちらもJavaScriptのvalueプロパティから入力内容を取得できます。①のテキストフィールドでは、次のように入力欄を取得して変数へ代入します。
次のコードは値の取得方法を説明するための例であり、ダウンロードするZIPには含まれていません。
// テキストフィールドの要素を取得
const textField = document.getElementById("clear-button-textbox-first");
// 入力内容を変数へ代入
const inputValue = textField.value;
inputValueには、取得した時点の入力内容が文字列として入ります。例えば「山田太郎」と入力されている場合は"山田太郎"となり、クリア後に取得すると空文字列の""になります。
②のテキストエリアでは、getElementById()に指定するIDをclear-button-textbox-secondへ変更してください。改行を含む文章も1つの文字列として取得できます。
入力内容が変わるたびに最新の値を確認したい場合は、inputイベントを使用します。次のコードでは、テキストフィールドの入力内容をブラウザの開発者ツールのコンソールへ表示します。
// テキストフィールドの要素を取得
const textField = document.getElementById("clear-button-textbox-first");
// 入力内容が変更されたときに値を取得
textField.addEventListener("input", function() {
// 現在の入力内容を取得
const inputValue = textField.value;
// 取得した値をコンソールへ表示
console.log(inputValue);
});
このコードを利用する場合は、index.htmlの</body>の直前に<script>要素を追加し、その中へ記述してください。文字を入力するたびに最新の値が表示され、クリアボタンを押すと空文字列が出力されます。
テキストエリアでも同じ方法で取得できます。入力欄のIDをclear-button-textbox-secondに変更すれば、改行を含む文章の変更も確認できます。なお、このJavaScriptは値の取得を説明するための追加例であり、クリアボタン本体の動作には必要ありません。
テキストフィールドのクリアボタンを調整する方法
①のクリアボタンは、入力欄を囲む.clear-button-textbox_input-wrapを配置基準にして、入力欄の右端へ重ねています。ボタンの位置や大きさは、style.cssの.clear-button-textbox_clear-iconで調整できます。
/* =========================================
入力欄右端のクリアボタン
========================================= */
.clear-button-textbox_clear-icon {
position: absolute;
top: 50%; /* 入力欄の高さの中央に配置する */
right: 12px; /* 右端からの距離。大きくすると左へ移動する */
display: flex;
align-items: center;
justify-content: center;
width: 32px; /* クリックできる範囲の横幅 */
height: 32px; /* クリックできる範囲の高さ */
padding: 0;
border: none;
outline: none;
box-shadow: none;
appearance: none;
border-radius: 0;
background: transparent;
color: #475569;
font-size: 22px; /* ×の文字サイズ */
line-height: 1;
cursor: pointer;
transform: translateY(-50%); /* ボタン自身の高さの半分だけ上へ移動する */
}
right: 12px;を大きくすると「×」が左へ移動し、小さくすると入力欄の右端へ近づきます。widthとheightはクリックできる範囲の大きさ、font-size: 22px;は「×」の文字サイズです。
background: transparent;によって通常時は背景を透明にしています。入力欄の文字とボタンが重ならないよう、.clear-button-textbox_inputにはpadding-right: 56px;を設定しています。ボタンの大きさや位置を変更する場合は、この右余白も合わせて調整してください。
テキストエリアのクリアボタンを調整する方法
②では、入力欄の下に.clear-button-textbox_actionsを配置し、クリアボタンを右寄せにしています。ボタンの大きさ・色・角丸は.clear-button-textbox_clearで変更できます。
/* =========================================
クリアボタンの配置
========================================= */
.clear-button-textbox_actions {
display: flex;
justify-content: flex-end; /* ボタンを右寄せにする */
margin-top: 12px; /* 入力欄とボタンの間隔 */
}
/* =========================================
クリアボタン本体
========================================= */
.clear-button-textbox_clear {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px; /* ボタンの最小の高さ */
padding: 10px 24px; /* 上下10px・左右24pxの余白 */
border: none;
border-radius: 10px; /* ボタンの角丸 */
background: #2563eb;
color: #ffffff;
font-size: 15px; /* ボタンの文字サイズ */
font-weight: 700;
line-height: 1.5;
font-family: inherit;
cursor: pointer;
}
justify-content: flex-end;でボタンを右寄せにしています。中央に配置したい場合はcenter、左寄せにしたい場合はflex-startへ変更できます。
margin-top: 12px;はテキストエリアとボタンの間隔です。padding: 10px 24px;を変更するとボタンの内側の余白、border-radius: 10px;を変更すると角の丸みを調整できます。背景色はbackground、文字色はcolorで変更してください。
入力欄のサイズとレスポンシブ対応
①と②のサンプルでは、親要素の.clear-button-textbox_containerにwidth: 100%;とmax-width: 480px;を設定しています。設置先の横幅に合わせて表示しながら、最大横幅を480pxに制限しています。margin: 40px auto;によって中央に配置し、上下に40pxの余白を設けています。
②のテキストエリアにはmin-height: 140px;を設定しており、この値を大きくすると入力欄が縦に広がります。また、resize: vertical;によって利用者が入力欄の高さを変更できます。
/* =========================================
スマートフォン対応
========================================= */
@media (max-width: 640px) {
/* 画面幅640px以下では入力欄の余白を調整する */
.clear-button-textbox_input {
padding: 14px; /* スマートフォン表示の上下左右の余白 */
padding-right: 56px; /* クリアボタン用の右余白を維持する */
}
}
画面幅が640px以下になると、①のテキストフィールドでは上下左右の余白を14pxに変更し、右側だけはクリアボタン用の56pxを維持します。②のテキストエリアも同じ画面幅で内側の余白を14pxに変更します。
PCでは入力欄を広めに表示し、スマートフォンでは内側の余白を小さくすることで、画面幅に合わせて使いやすいサイズに調整しています。
コメント