クリアボタン付きテキストエリアを作る方法
クリアボタン付きテキストエリアを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用し、入力中の文章をボタンひとつで削除できるテキストエリアを作成します。長文を入力したあとでも、クリアボタンを押すだけですべての入力内容をまとめて消去できるため、再入力したい場合や入力ミスをやり直したい場合に便利です。
お問い合わせフォーム、アンケート、メモ機能、コメント入力、管理画面など、文章を入力するフォームで活用できます。入力内容を一文字ずつ削除する必要がなく、不要になった内容をすぐに消去できるため、入力作業を快適に行えます。クリア後はテキストエリアへフォーカスが戻るため、そのまま続けて入力を開始できます。
タイトル、説明文、ラベル、プレースホルダー、ボタンの文字は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="textarea-clear-button_wrap">
<!-- タイトル -->
<div class="textarea-clear-button_title">
お問い合わせ内容
</div>
<!-- 説明文 -->
<p class="textarea-clear-button_text">
クリアボタンを押すと入力内容を削除できます。
</p>
<!-- 入力項目 -->
<div class="textarea-clear-button_group">
<!-- ラベル -->
<label
class="textarea-clear-button_label"
for="message">
内容
</label>
<!-- テキストエリア -->
<textarea
id="message"
name="message"
class="textarea-clear-button_input"
placeholder="お問い合わせ内容を入力してください。"></textarea>
</div>
<!-- クリアボタン表示エリア -->
<div class="textarea-clear-button_actions">
<!-- 入力内容を削除するボタン -->
<button
type="button"
id="clear-button"
class="textarea-clear-button_button">
入力内容をクリア
</button>
</div>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>
/* ページ全体 */
body{
margin:0; /* ブラウザ標準の外側余白を削除 */
padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との余白が広がる */
background:#ffffff; /* ページ全体の背景色 */
color:#111827; /* ページ全体の基本文字色 */
font-family:sans-serif; /* ページ全体で使用するフォント */
}
/* 入力フォーム全体 */
.textarea-clear-button_wrap{
width:100%; /* 画面幅に合わせて横幅を縮小 */
max-width:700px; /* 最大横幅。値を大きくするとフォーム全体が横に広がる */
margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
padding:32px; /* 内側余白。値を大きくすると内容と枠線の間隔が広がる */
border:1px solid #e5e7eb; /* フォーム全体を囲む枠線 */
border-radius:18px; /* フォーム全体の角丸。値を大きくすると丸みが強くなる */
background:#f8fafc; /* フォーム全体の背景色 */
box-sizing:border-box; /* paddingとborderを横幅へ含める */
}
/* タイトル */
.textarea-clear-button_title{
margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
color:#111827; /* タイトルの文字色 */
font-size:22px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
font-weight:700; /* タイトルを太字にする */
line-height:1.5; /* タイトルの行間 */
text-align:center; /* タイトルを中央揃えにする */
}
/* 説明文 */
.textarea-clear-button_text{
margin:0 0 24px; /* 下側24pxの余白。値を大きくすると入力項目との間隔が広がる */
color:#4b5563; /* 説明文の文字色 */
font-size:16px; /* 説明文の文字サイズ */
line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
text-align:center; /* 説明文を中央揃えにする */
}
/* 入力項目 */
.textarea-clear-button_group{
display:flex; /* ラベルと入力欄をまとめる */
flex-direction:column; /* 各要素を縦方向へ並べる */
gap:10px; /* ラベルと入力欄の間隔。値を大きくすると間隔が広がる */
}
/* ラベル */
.textarea-clear-button_label{
color:#111827; /* ラベルの文字色 */
font-size:16px; /* ラベルの文字サイズ */
font-weight:700; /* ラベルを太字にする */
line-height:1.5; /* ラベルの行間 */
}
/* テキストエリア */
.textarea-clear-button_input{
width:100%; /* 親要素の横幅いっぱいに表示 */
min-height:180px; /* 初期の最低高さ。値を大きくすると最初から高く表示される */
padding:14px 16px; /* 上下14px・左右16px。値を大きくすると文字と枠線の間隔が広がる */
border:2px solid #d1d5db; /* 通常時の枠線。2pxを大きくすると枠線が太くなる */
border-radius:10px; /* 入力欄の角丸。値を大きくすると丸みが強くなる */
background:#ffffff; /* 入力欄の背景色 */
color:#111827; /* 入力文字の色 */
font:inherit; /* ページ全体と同じフォントを使用 */
line-height:1.7; /* 入力文字の行間。値を大きくすると行間が広がる */
resize:vertical; /* 上下方向のみ手動で高さを変更できる */
box-sizing:border-box; /* paddingとborderを横幅へ含める */
outline:none; /* ブラウザ標準の外枠を非表示 */
transition:
border-color 0.3s ease,
box-shadow 0.3s ease;
/*
0.3秒で枠線と影を切り替える。
0.6秒にするとゆっくり、0.1秒にすると速く変化する。
*/
}
/* プレースホルダー */
.textarea-clear-button_input::placeholder{
color:#9ca3af; /* プレースホルダーの文字色 */
opacity:1; /* ブラウザごとの透明度差をなくす */
}
/* テキストエリアを選択した状態 */
.textarea-clear-button_input:focus{
border-color:#2563eb; /* フォーカス時の枠線色 */
box-shadow:0 0 0 4px rgba(37,99,235,0.12); /* 外側の強調範囲。4pxを大きくすると影が広がる */
}
/* クリアボタン表示エリア */
.textarea-clear-button_actions{
margin-top:20px; /* 上側20pxの余白。値を大きくすると入力欄との間隔が広がる */
text-align:center; /* ボタンを中央揃えにする */
}
/* クリアボタン */
.textarea-clear-button_button{
min-width:180px; /* ボタンの最低横幅。値を大きくすると横長になる */
min-height:50px; /* ボタンの最低高さ。値を大きくすると高くなる */
padding:14px 32px; /* 上下14px・左右32px。値を大きくするとボタンが大きくなる */
border:none; /* ボタンの枠線を非表示 */
border-radius:10px; /* ボタンの角丸。値を大きくすると丸みが強くなる */
background:#ef4444; /* ボタンの背景色 */
color:#ffffff; /* ボタンの文字色 */
font:inherit; /* ページ全体と同じフォントを使用 */
font-size:16px; /* ボタン文字のサイズ */
font-weight:700; /* ボタン文字を太字にする */
line-height:1.5; /* ボタン文字の行間 */
cursor:pointer; /* マウスカーソルを指型へ変更 */
transition:background-color 0.3s ease; /* 0.3秒で背景色を変化。値を大きくするとゆっくり変化する */
}
/* ボタンへマウスを重ねた状態 */
.textarea-clear-button_button:hover{
background:#dc2626; /* マウスを重ねたときの背景色 */
}
/* ボタンへフォーカスした状態 */
.textarea-clear-button_button:focus{
outline:3px solid rgba(239,68,68,0.22); /* 外側の強調表示。3pxを大きくすると太くなる */
outline-offset:3px; /* ボタンと外枠の間隔。値を大きくすると外側へ離れる */
}
/* 画面幅640px以下 */
@media screen and (max-width:640px){
/* スマートフォン表示時のページ全体 */
body{
padding:24px 12px; /* 上下24px・左右12pxへ縮小 */
}
/* スマートフォン表示時の入力フォーム全体 */
.textarea-clear-button_wrap{
margin:24px auto; /* 上下余白を24pxへ縮小 */
padding:24px 18px; /* 上下24px・左右18pxへ縮小 */
}
/* スマートフォン表示時のテキストエリア */
.textarea-clear-button_input{
min-height:160px; /* 初期の最低高さを160pxへ縮小 */
padding:13px 14px; /* 上下13px・左右14pxへ縮小 */
}
/* スマートフォン表示時のクリアボタン */
.textarea-clear-button_button{
width:100%; /* ボタンを横幅いっぱいに表示 */
}
}
// テキストエリアを取得
const messageTextarea=document.getElementById("message");
// クリアボタンを取得
const clearButton=document.getElementById("clear-button");
/*
クリアボタンを押したときに
テキストエリアの入力内容を削除する
*/
clearButton.addEventListener("click",function(){
// テキストエリアの入力内容を空にする
messageTextarea.value="";
// クリア後にテキストエリアへカーソルを戻す
messageTextarea.focus();
});
コードをコピーする場合
使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合
HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではテキストエリアとクリアボタンを配置し、CSSではフォーム全体やボタンのデザインを設定します。JavaScriptではクリアボタンをクリックしたときに入力内容を削除し、削除後は自動でテキストエリアへフォーカスを戻す処理を行います。シンプルな構成のため、初心者でも仕組みを理解しながら導入できます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはフォーム全体を構成するファイルです。タイトル、説明文、ラベル、プレースホルダー、クリアボタンの文字を変更できます。
style.cssはフォームやテキストエリア、クリアボタンのデザインを設定するファイルです。横幅、高さ、余白、背景色、文字色、角丸、ボタンカラーなどを変更できます。
script.jsはクリアボタンを押したときの処理を記述するファイルです。入力内容を削除し、その後テキストエリアへカーソルを戻す動作を行います。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。テキストエリアへ文字を入力し、「入力内容をクリア」ボタンを押すと入力内容が削除され、続けて新しい内容を入力できます。
カスタマイズできる内容
index.htmlではタイトル、説明文、ラベル、プレースホルダー、クリアボタンの文字を変更できます。用途に合わせてお問い合わせフォーム、メモ欄、コメント欄などへ変更できます。
style.cssではフォーム全体の横幅、余白、背景色、テキストエリアの高さ、文字サイズ、角丸、ボタンの色やサイズなどを変更できます。
script.jsではクリアボタンを押したときの処理を書き換えることで、確認ダイアログを表示したり、削除前後に独自の処理を追加したりできます。
数値調整
style.css
max-width:700px;
フォーム全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
padding:32px;
フォーム全体の内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると詰まった表示になります。
min-height:180px;
テキストエリアの初期高さです。値を大きくすると最初から高く表示され、小さくすると低く表示されます。
padding:14px 16px;
テキストエリアの内側余白です。上下・左右の値を変更すると文字と枠線の間隔が変わります。
border-radius:10px;
テキストエリアとボタンの角丸です。値を大きくすると丸みが強くなり、小さくすると角ばった表示になります。
transition:0.3s;
色や影が切り替わる時間です。値を大きくするとゆっくり、小さくすると速く切り替わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより画面幅に応じてフォーム全体が縮小されます。また、640px以下ではmedia queryによって余白を小さくし、クリアボタンを横幅いっぱいへ表示するため、スマートフォン・タブレット・PCで快適に利用できます。
コメント