テキストエリアを有効・無効に切り替えるトグルスイッチを作る方法
テキストエリアを有効・無効に切り替えるトグルスイッチを作る方法を紹介します。このサンプルでは、トグルスイッチを切り替えることで、textarea要素へ入力できる状態と入力できない状態をJavaScriptで切り替えます。入力が不要な場面では編集を禁止し、必要になったタイミングだけ入力を許可できるため、フォームの操作性を向上できます。
お問い合わせフォームの詳細入力欄、アンケートの自由記述欄、管理画面のメモ入力、会員情報の備考欄など、条件によって入力を許可したい場面で活用できます。OFFの間はテキストエリアが無効になり、入力や編集ができません。ONへ切り替えるとすぐに入力可能になり、利用者にも現在の状態が分かりやすく表示されます。
タイトル、説明文、ラベル、プレースホルダーは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="toggle-textarea-enable_wrap">
<!-- タイトル -->
<div class="toggle-textarea-enable_title">
お問い合わせ
</div>
<!-- 説明文 -->
<p class="toggle-textarea-enable_text">
トグルスイッチを切り替えるとテキストエリアの有効・無効が切り替わります。
</p>
<!-- トグルスイッチ -->
<div class="toggle-textarea-enable_row">
<div class="toggle-textarea-enable_label">
内容を入力する
</div>
<label class="toggle-textarea-enable_switch">
<input type="checkbox" id="toggle-switch" checked>
<span class="toggle-textarea-enable_slider"></span>
</label>
</div>
<!-- テキストエリア -->
<div class="toggle-textarea-enable_group">
<label for="message">
お問い合わせ内容
</label>
<textarea
id="message"
placeholder="お問い合わせ内容を入力してください。"></textarea>
</div>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではトグルスイッチとテキストエリアを配置し、CSSではスイッチや入力欄のデザインを設定します。JavaScriptではトグルスイッチのON・OFF状態に合わせて、テキストエリアの有効・無効を切り替えます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlは画面全体を構成するファイルです。「お問い合わせ」のタイトル、説明文、「内容を入力する」の項目名、テキストエリアのラベル、プレースホルダーを変更できます。トグルスイッチにはchecked属性が設定されているため、ページを開いた時点ではテキストエリアが有効になっています。
style.cssはトグルスイッチとテキストエリアの見た目を設定するファイルです。全体の横幅、背景色、余白、角丸、スイッチのサイズ、テキストエリアの高さ、枠線、フォーカス時や無効時の表示を変更できます。
script.jsはトグルスイッチとテキストエリアを連動させるファイルです。トグルスイッチをONにするとテキストエリアを有効にし、OFFにすると無効へ切り替えます。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。初期状態ではテキストエリアへ入力できます。トグルスイッチをOFFにすると入力や編集ができなくなり、ONへ戻すと再び入力できるようになります。
カスタマイズできる内容
index.htmlではタイトル、説明文、項目名、テキストエリアのラベル、プレースホルダーを変更できます。お問い合わせ内容だけでなく、備考欄、自由記述欄、管理用メモなどの用途へ変更できます。初期状態を無効にしたい場合は、トグルスイッチのchecked属性を削除し、テキストエリアへdisabled属性を追加します。
style.cssでは全体の横幅、背景色、余白、文字サイズ、トグルスイッチの色とサイズ、テキストエリアの高さ、角丸、入力文字の行間、フォーカス時の枠線や影、無効時の背景色を変更できます。
script.jsでは有効・無効を切り替える対象を別のテキストエリアへ変更できます。このサンプルでは、IDがmessageのテキストエリア1つだけを切り替え対象にしています。
数値調整
style.css
max-width:700px;
全体の最大横幅です。値を大きくすると横へ広がり、小さくするとコンパクトになります。
margin:40px auto;
全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
全体の内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると詰まった表示になります。
border-radius:18px;
全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。
margin-bottom:28px;
トグルスイッチの設定項目とテキストエリアの間隔です。値を大きくすると上下の余白が広がります。
width:92px;
トグルスイッチの横幅です。値を大きくするとスイッチが横長になります。
height:48px;
トグルスイッチの高さです。値を大きくするとスイッチ全体が高くなります。
width:38px;・height:38px;
スイッチ内にある丸いノブのサイズです。値を大きくするとノブも大きくなります。
transform:translateX(44px);
ON時にノブが右へ移動する距離です。44pxを変更すると移動位置が変わります。
gap:10px;
テキストエリアのラベルと入力欄の間隔です。値を大きくすると間隔が広がります。
min-height:170px;
テキストエリアの初期高さです。値を大きくすると最初から高く表示され、小さくすると低くなります。
padding:14px 16px;
テキストエリアの内側余白です。上下の14pxを大きくすると入力欄が高くなり、左右の16pxを大きくすると文字と枠線の間隔が広がります。
border:2px solid #d1d5db;
テキストエリアの枠線です。2pxを大きくすると枠線が太くなり、小さくすると細くなります。
border-radius:10px;
テキストエリアの角丸です。値を大きくすると丸みが強くなります。
line-height:1.7;
入力文字の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
transition:0.3s;
トグルスイッチやテキストエリアの表示が切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。
box-shadow:0 0 0 4px ...
テキストエリアへフォーカスしたときの強調範囲です。4pxを大きくすると影が広がり、小さくすると控えめになります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより、画面幅に合わせて全体が縮小されます。また、640px以下では全体の内側余白を小さくし、項目名とトグルスイッチを縦並びへ変更しているため、スマートフォン・タブレット・PCで利用できます。
コメント