大文字を小文字に・小文字を大文字にアルファベットを自動変換するテキストフィールドを作る方法
英字を入力すると、アルファベットの大文字を小文字へ、小文字を大文字へ自動変換できるテキストフィールドを作る方法を紹介します。大文字へ変換する入力欄と小文字へ変換する入力欄を用意し、入力した内容をその場で指定した形式へ変換します。
JavaScriptで入力内容を取得し、大文字へ変換するテキストフィールドでは小文字を大文字へ、小文字へ変換するテキストフィールドでは大文字を小文字へ変換します。商品コードやユーザーID、管理番号など、アルファベットの表記を統一したい入力フォームに利用できます。
入力欄は1行入力用のテキストフィールドを使用しており、アルファベット以外の数字や日本語、記号なども入力できます。入力内容全体を確認しながら英字の大文字・小文字を揃えられるため、お問い合わせフォーム、会員登録画面、管理画面など、入力形式を整えたい場面で活用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
入力したアルファベットを指定した形式へ自動変換します。
上のテキストフィールドへ小文字のアルファベットを入力すると大文字へ変換され、下のテキストフィールドへ大文字を入力すると小文字へ変換されます。数字や日本語、記号などを含めて入力することもできます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードをUTF-8へ設定 -->
<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-text-field_wrap">
<!-- 入力エリアのタイトル -->
<div class="alphabet-uppercase-lowercase-text-field_title">
アルファベットの大文字・小文字を自動変換
</div>
<!-- 入力方法を案内する説明文 -->
<p class="alphabet-uppercase-lowercase-text-field_text">
入力したアルファベットを指定した形式へ自動変換します。
</p>
<!-- 小文字から大文字へ変換する入力グループ -->
<div class="alphabet-uppercase-lowercase-text-field_group">
<!-- 小文字から大文字へ変換する入力欄のラベル -->
<label
class="alphabet-uppercase-lowercase-text-field_label"
for="alphabet-uppercase">
小文字 → 大文字
</label>
<!-- 入力したアルファベットを大文字へ変換するテキストフィールド -->
<input
class="alphabet-uppercase-lowercase-text-field_input"
id="alphabet-uppercase"
type="text"
placeholder="abc123-商品">
</div>
<!-- 大文字から小文字へ変換する入力グループ -->
<div class="alphabet-uppercase-lowercase-text-field_group">
<!-- 大文字から小文字へ変換する入力欄のラベル -->
<label
class="alphabet-uppercase-lowercase-text-field_label"
for="alphabet-lowercase">
大文字 → 小文字
</label>
<!-- 入力したアルファベットを小文字へ変換するテキストフィールド -->
<input
class="alphabet-uppercase-lowercase-text-field_input"
id="alphabet-lowercase"
type="text"
placeholder="ABC123-商品">
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML、CSS、JavaScriptの3ファイルで構成されています。HTMLでは小文字から大文字へ変換するテキストフィールドと、大文字から小文字へ変換するテキストフィールドを配置します。JavaScriptで入力内容を取得し、文字が入力されるたびに大文字または小文字へ自動変換します。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはテキストフィールド全体を構成するファイルです。タイトル、説明文、ラベル、小文字から大文字へ変換する入力欄、大文字から小文字へ変換する入力欄を配置しています。
style.cssはテキストフィールド全体のデザインを設定するファイルです。横幅、余白、背景色、文字サイズ、枠線、角丸、フォーカス時の表示などを変更できます。
script.jsは入力された文字を大文字または小文字へ自動変換するファイルです。上側のテキストフィールドではtoUpperCase()を使って大文字へ変換し、下側ではtoLowerCase()を使って小文字へ変換します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。上側のテキストフィールドへ小文字のアルファベットを入力すると大文字へ変換され、下側へ大文字を入力すると小文字へ変換されます。
カスタマイズできる内容
index.htmlではタイトル、説明文、ラベル、プレースホルダーなどを変更できます。商品コード、ユーザーID、管理番号など、アルファベットの大文字・小文字を揃えたい入力項目へ変更できます。
style.cssでは全体の横幅、背景色、余白、文字サイズ、枠線、角丸、入力欄の高さ、フォーカス時の枠線色などを調整できます。script.jsでは大文字へ変換する処理と小文字へ変換する処理をそれぞれ確認できます。
数値調整
style.css
max-width:700px;
全体の最大横幅です。値を大きくすると横幅が広がり、小さくするとコンパクトになります。
padding:32px;
全体の内側余白です。値を大きくすると内容との間隔が広がり、小さくすると詰まった表示になります。
font-size:28px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
gap:10px;
ラベルとテキストフィールドの間隔です。値を大きくすると間隔が広がり、小さくすると狭くなります。
margin-bottom:24px;
2つの入力グループの間隔です。値を大きくすると上下の間隔が広がります。
padding:14px 16px;
テキストフィールドの内側余白です。上下の14pxを変更すると入力欄の高さが変わり、左右の16pxを変更すると入力文字と枠線の間隔が変わります。
border-radius:10px;
テキストフィールドの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
box-shadow:0 0 0 4px rgba(...)
フォーカス時に表示する外側の強調表示です。4pxを大きくすると強調部分が太くなり、小さくすると控えめになります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって画面幅に合わせて全体が縮小します。また、640px以下ではページとフォームの余白、タイトルサイズ、テキストフィールドの内側余白を調整しているため、スマートフォン・タブレット・PCで利用できます。
コメント