クリアボタン付きテキストエリアを作る方法
クリアボタン付きテキストエリアを作る方法を紹介します。このサンプルでは、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>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではお問い合わせ内容を入力するテキストエリアと、入力内容を削除するクリアボタンを配置します。CSSではフォーム、テキストエリア、クリアボタンのデザインを設定し、JavaScriptではクリアボタンをクリックしたときにテキストエリアの入力内容を空にします。クリア後はテキストエリアへフォーカスを戻すため、そのまま文章を入力し直せます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlは入力フォーム全体を構成するファイルです。ページタイトル、「お問い合わせ内容」のタイトル、説明文、「内容」のラベル、プレースホルダー、テキストエリア、「入力内容をクリア」ボタンを配置しています。表示する文章やボタンの文字は用途に合わせて変更できます。
style.cssはページ全体、フォーム、タイトル、説明文、ラベル、テキストエリア、クリアボタンのデザインを設定するファイルです。フォームの最大横幅、余白、背景色、枠線、角丸、テキストエリアの高さ、ボタンの大きさや背景色、フォーカス時の強調表示などを変更できます。画面幅640px以下では余白やテキストエリアの高さを調整し、クリアボタンを横幅いっぱいに表示します。
script.jsはクリアボタンをクリックしたときの処理を設定するファイルです。messageTextarea.value=""によってテキストエリアの入力内容を空にし、そのあとmessageTextarea.focus()を実行してテキストエリアへフォーカスを戻します。
設置方法・使い方
sampleフォルダを作成し、その中へindex.html・style.css・script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。「内容」のテキストエリアへ文章を入力し、「入力内容をクリア」ボタンをクリックすると入力した内容がすべて削除されます。削除後はテキストエリアへフォーカスが戻るため、そのまま新しい文章を入力できます。
カスタマイズできる内容
index.htmlではページタイトル、フォーム内の「お問い合わせ内容」のタイトル、説明文、「内容」のラベル、プレースホルダー、「入力内容をクリア」のボタン文字を変更できます。お問い合わせフォームだけでなく、コメント入力欄、メモ欄、投稿フォームなど、文章を入力する用途に合わせて表示内容を編集できます。
style.cssではページとフォームの背景色、最大横幅、余白、枠線、角丸、テキストエリアの高さ、文字サイズ、行間、フォーカス時の枠線色や影を変更できます。クリアボタンについても横幅、高さ、余白、角丸、背景色、文字サイズ、マウスを重ねたときの背景色などを変更できます。
script.jsではdocument.getElementById("message")でテキストエリア、document.getElementById("clear-button")でクリアボタンを取得しています。index.htmlのIDを変更する場合は、script.jsのgetElementById()へ指定するIDも同じ値へ変更してください。
数値調整
style.css
padding:40px 20px;
ページ全体の内側余白です。40pxは上下、20pxは左右の余白を表します。値を大きくすると画面端との間隔が広がり、小さくすると狭くなります。
max-width:700px;
フォーム全体の最大横幅です。値を大きくするとフォームをより横長に表示でき、小さくするとコンパクトになります。
margin:40px auto;
フォーム全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。autoによって左右中央へ配置します。
padding:32px;
フォーム全体の内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると狭くなります。
border:1px solid #e5e7eb;
フォーム全体の枠線です。1pxを大きくすると枠線が太くなります。#e5e7ebを変更すると枠線の色を調整できます。
border-radius:18px;
フォーム全体の角丸です。値を大きくすると丸みが強くなり、0にすると角丸がなくなります。
margin:0 0 12px;
タイトルの下側余白です。12pxを大きくすると説明文との間隔が広がり、小さくすると狭くなります。
font-size:22px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
line-height:1.5;
タイトル、ラベル、ボタン文字に設定している行間です。値を大きくすると行間が広がり、小さくすると狭くなります。
margin:0 0 24px;
説明文の下側余白です。24pxを大きくすると入力項目との間隔が広がり、小さくすると狭くなります。
font-size:16px;
説明文、ラベル、ボタンに設定している文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
line-height:1.8;
説明文の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
gap:10px;
ラベルとテキストエリアの間隔です。値を大きくすると間隔が広がり、小さくすると近くなります。
min-height:180px;
テキストエリアの最低高さです。値を大きくすると入力欄が高くなり、小さくすると低くなります。
padding:14px 16px;
テキストエリアの内側余白です。14pxは上下、16pxは左右の余白を表します。値を大きくすると入力文字と枠線の間隔が広がります。
border:2px solid #d1d5db;
テキストエリアの通常時の枠線です。2pxを大きくすると枠線が太くなります。#d1d5dbを変更すると枠線の色を調整できます。
border-radius:10px;
テキストエリアの角丸です。値を大きくすると丸みが強くなり、0にすると角丸がなくなります。
line-height:1.7;
テキストエリア内の入力文字の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
transition:border-color 0.3s ease, box-shadow 0.3s ease;
テキストエリアへフォーカスしたときの枠線と影の切り替え時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。
box-shadow:0 0 0 4px rgba(37,99,235,0.12);
テキストエリアへフォーカスしたときに表示する外側の強調表示です。4pxを大きくすると強調範囲が広がり、小さくすると狭くなります。
margin-top:20px;
テキストエリアとクリアボタン表示エリアの間隔です。値を大きくするとボタンが入力欄から離れ、小さくすると近くなります。
min-width:180px;
クリアボタンの最低横幅です。値を大きくするとボタンが横長になり、小さくするとコンパクトになります。
min-height:50px;
クリアボタンの最低高さです。値を大きくするとボタンが高くなり、小さくすると低くなります。
padding:14px 32px;
クリアボタンの内側余白です。14pxは上下、32pxは左右の余白を表します。値を大きくするとボタン内の余白が広がります。
border-radius:10px;
クリアボタンの角丸です。値を大きくすると丸みが強くなり、0にすると角丸がなくなります。
transition:background-color 0.3s ease;
クリアボタンへマウスを重ねたときの背景色が切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。
outline:3px solid rgba(239,68,68,0.22);
クリアボタンへフォーカスしたときに表示する外枠です。3pxを大きくすると外枠が太くなり、小さくすると細くなります。
outline-offset:3px;
クリアボタンとフォーカス時の外枠との間隔です。値を大きくすると外枠がボタンから離れ、小さくすると近くなります。
max-width:640px
スマートフォン向けのスタイルへ切り替える画面幅です。画面幅が640px以下になると、メディアクエリ内の設定が適用されます。
padding:24px 12px;
画面幅640px以下で使用するページ全体の内側余白です。24pxは上下、12pxは左右の余白を表します。
margin:24px auto;
画面幅640px以下で使用するフォーム全体の上下余白です。24pxを変更するとスマートフォン表示時の上下間隔が変わります。
padding:24px 18px;
画面幅640px以下で使用するフォーム全体の内側余白です。24pxは上下、18pxは左右の余白を表します。
min-height:160px;
画面幅640px以下で使用するテキストエリアの最低高さです。値を変更するとスマートフォン表示時の入力欄の高さが変わります。
padding:13px 14px;
画面幅640px以下で使用するテキストエリアの内側余白です。13pxは上下、14pxは左右の余白を表します。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、画面幅に合わせてフォーム全体が縮小されます。また、画面幅640px以下ではページとフォームの余白、テキストエリアの最低高さと内側余白を小さくし、クリアボタンをwidth:100%にして横幅いっぱいに表示します。
コメント