アルファベットの大文字・小文字を自動変換するテキストエリアを作る方法
アルファベットの大文字・小文字を自動変換するテキストエリアを作る方法を紹介します。このサンプルでは、上側のテキストエリアへ入力したアルファベットを大文字へ、下側のテキストエリアへ入力したアルファベットを小文字へリアルタイムで変換します。文字を入力するたびにJavaScriptで変換されるため、変換ボタンを押す必要はありません。
管理画面で商品コードや識別番号を大文字へ統一したい場合、会員サイトでメールアドレスを小文字へ揃えたい場合、ECサイトの商品情報やお問い合わせ画面で表記ゆれを抑えたい場合などに利用できます。複数行入力できるテキストエリアを使用しているため、改行を含む文章や複数のコードをまとめて入力する用途にも対応できます。
HTMLではタイトル、説明文、ラベル、補足文、プレースホルダーを変更できます。CSSではフォーム全体の横幅、余白、背景色、枠線、角丸、テキストエリアの高さなどを調整できます。JavaScriptではtoUpperCase()とtoLowerCase()を使用して変換しており、外部ライブラリを使わずに実装できます。レスポンシブ対応のため、スマートフォン・タブレット・PCでも利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
入力したアルファベットが、大文字または小文字へリアルタイムで変換されます。
上のテキストエリアでは小文字が大文字へ、下のテキストエリアでは大文字が小文字へ入力と同時に変換されます。
コードをコピーして使おう！
<!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="alphabet-uppercase-lowercase-textarea_wrap">
<!-- タイトル -->
<div class="alphabet-uppercase-lowercase-textarea_title">
アルファベットを自動変換
</div>
<!-- 説明文 -->
<p class="alphabet-uppercase-lowercase-textarea_text">
入力したアルファベットが、大文字または小文字へリアルタイムで変換されます。
</p>
<!-- 大文字変換グループ -->
<div class="alphabet-uppercase-lowercase-textarea_group">
<!-- 大文字変換用ラベル -->
<label
class="alphabet-uppercase-lowercase-textarea_label"
for="uppercase-textarea">
大文字へ自動変換
</label>
<!-- 入力内容を大文字へ変換するテキストエリア -->
<textarea
class="alphabet-uppercase-lowercase-textarea_input"
id="uppercase-textarea"
name="uppercase-textarea"
placeholder="例：product code abcd-1234-efgh"></textarea>
<!-- 大文字変換の補足文 -->
<span class="alphabet-uppercase-lowercase-textarea_note">
小文字で入力したアルファベットが大文字へ変換されます。
</span>
</div>
<!-- 小文字変換グループ -->
<div class="alphabet-uppercase-lowercase-textarea_group">
<!-- 小文字変換用ラベル -->
<label
class="alphabet-uppercase-lowercase-textarea_label"
for="lowercase-textarea">
小文字へ自動変換
</label>
<!-- 入力内容を小文字へ変換するテキストエリア -->
<textarea
class="alphabet-uppercase-lowercase-textarea_input"
id="lowercase-textarea"
name="lowercase-textarea"
placeholder="例：USER@EXAMPLE.COM CONTACT MESSAGE"></textarea>
<!-- 小文字変換の補足文 -->
<span class="alphabet-uppercase-lowercase-textarea_note">
大文字で入力したアルファベットが小文字へ変換されます。
</span>
</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は入力フォーム全体を構成するファイルです。ページタイトル、「アルファベットを自動変換」のタイトル、説明文、各テキストエリアのラベル、プレースホルダー、補足文を変更できます。大文字変換用と小文字変換用の2つのテキストエリアを配置しています。
style.cssはページ全体、フォーム、タイトル、説明文、ラベル、テキストエリア、補足文のデザインを設定するファイルです。フォームの最大横幅、余白、背景色、枠線、角丸、テキストエリアの高さ、フォーカス時の枠線色や影などを変更できます。
script.jsは入力内容を自動変換するファイルです。大文字変換用のテキストエリアではtoUpperCase()を使用し、小文字変換用のテキストエリアではtoLowerCase()を使用しています。文字を入力または貼り付けるたびに変換処理が実行されます。
設置方法・使い方
sampleフォルダを作成し、その中へindex.html・style.css・script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。上側のテキストエリアへアルファベットを入力すると大文字へ変換され、下側のテキストエリアへ入力すると小文字へ変換されます。改行を含む複数行の文章も入力できます。
カスタマイズできる内容
index.htmlではページタイトル、フォーム内のタイトル、説明文、「大文字へ自動変換」「小文字へ自動変換」のラベル、プレースホルダー、各入力欄の補足文を変更できます。商品コード、識別番号、メールアドレス、複数行の文章など、変換する内容に合わせて表示を編集できます。
style.cssではページとフォームの背景色、最大横幅、余白、枠線、角丸、テキストエリアの高さ、文字サイズ、行間、フォーカス時の色や影を変更できます。resize:vertical;を変更すると、利用者によるテキストエリアの高さ変更方法も調整できます。
script.jsで変換対象を変更する場合は、index.htmlのIDとgetElementById()へ指定するIDを一致させてください。大文字変換はtoUpperCase()、小文字変換はtoLowerCase()が担当しています。
数値調整
style.css
padding:40px 20px;
ページ全体の内側余白です。40pxは上下、20pxは左右の余白を表します。値を大きくすると画面端との間隔が広がり、小さくすると狭くなります。
max-width:700px;
フォーム全体の最大横幅です。値を大きくすると横長になり、小さくするとコンパクトになります。
margin:40px auto;
フォーム全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。autoによって左右中央へ配置します。
padding:32px;
フォーム全体の内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると狭くなります。
border:1px solid #dbe4f0;
フォーム全体の枠線です。1pxを大きくすると枠線が太くなります。
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;
説明文の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
margin-bottom:24px;
大文字変換用と小文字変換用の入力グループの間隔です。値を大きくすると2つの入力欄が離れ、小さくすると近くなります。
margin-bottom:8px;
ラベルとテキストエリアの間隔です。8pxを大きくすると間隔が広がり、小さくすると近くなります。
min-height:150px;
テキストエリアの初期の最低高さです。値を大きくすると最初から高く表示され、小さくすると低くなります。
padding:14px 16px;
テキストエリアの内側余白です。14pxは上下、16pxは左右の余白を表します。値を大きくすると入力文字と枠線の間隔が広がります。
border:2px solid #cbd5e1;
テキストエリアの枠線です。2pxを大きくすると枠線が太くなり、小さくすると細くなります。
border-radius:10px;
テキストエリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
line-height:1.7;
テキストエリア内の入力文字の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
transition:0.3s;
テキストエリアの枠線と影が切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。
box-shadow:0 0 0 4px ...
テキストエリアへフォーカスしたときに表示する外側の強調範囲です。4pxを大きくすると影が広がり、小さくすると控えめになります。
margin-top:6px;
テキストエリアと補足文の間隔です。6pxを大きくすると間隔が広がり、小さくすると近くなります。
font-size:14px;
補足文の文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
padding:24px 12px;
画面幅640px以下で使用するページ全体の内側余白です。24pxは上下、12pxは左右の余白を表します。
margin:24px auto;
画面幅640px以下で使用するフォーム全体の上下余白です。24pxを変更するとスマートフォン表示時の上下間隔が変わります。
padding:24px 18px;
画面幅640px以下で使用するフォーム全体の内側余白です。24pxは上下、18pxは左右の余白を表します。
min-height:130px;
画面幅640px以下で使用するテキストエリアの最低高さです。値を変更するとスマートフォン表示時の初期高さが変わります。
padding:13px 14px;
画面幅640px以下で使用するテキストエリアの内側余白です。13pxは上下、14pxは左右の余白を表します。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、画面幅に合わせてフォーム全体が縮小されます。また、画面幅640px以下ではページとフォームの余白、テキストエリアの最低高さと内側余白を小さくするメディアクエリを設定しているため、スマートフォン・タブレット・PCで利用できます。
コメント