アルファベットの大文字・小文字を自動変換するテキストボックスを作る方法
アルファベットの大文字・小文字を自動変換するテキストボックスを作る方法を紹介します。このサンプルでは、入力したアルファベットをリアルタイムで大文字または小文字へ自動変換するテキストボックスを実装しています。HTML・CSS・JavaScriptのみで動作するため、特別なライブラリは不要で、そのままWebサイトへ導入できます。
デモでは「大文字へ自動変換」と「小文字へ自動変換」の2種類を用意しています。ライセンスキーや商品コード、管理番号などは大文字で統一したい場面が多く、メールアドレスやユーザーIDなどは小文字へ統一したいケースがあります。入力時に自動変換することで、入力ミスや表記ゆれを防ぎ、データを統一しやすくなります。
お問い合わせ画面、会員サイト、管理画面、ECサイトなど、アルファベット入力を行うさまざまなフォームで利用できます。文字色や枠線、余白などのデザインはCSSで自由に変更できるため、既存サイトのデザインにも合わせやすく、初心者でもカスタマイズしながら導入しやすいサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
入力したアルファベットが、大文字または小文字へリアルタイムで変換されます。
上の入力欄では小文字が大文字へ、下の入力欄では大文字が小文字へ自動変換されます。
コードをコピーして使おう！
<!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-textbox_wrap">
<!-- タイトル -->
<h1 class="alphabet-uppercase-lowercase-textbox_title">
アルファベットを自動変換
</h1>
<!-- 説明文 -->
<p class="alphabet-uppercase-lowercase-textbox_text">
入力したアルファベットが、大文字または小文字へリアルタイムで変換されます。
</p>
<!-- 大文字変換エリア -->
<div class="alphabet-uppercase-lowercase-textbox_group">
<!-- 大文字変換のラベル -->
<label
class="alphabet-uppercase-lowercase-textbox_label"
for="uppercase-input">
大文字へ自動変換
</label>
<!-- 入力文字を大文字へ変換するテキストボックス -->
<input
class="alphabet-uppercase-lowercase-textbox_input"
id="uppercase-input"
name="uppercase-input"
type="text"
placeholder="例：abcd-1234-efgh">
<!-- 大文字変換の説明 -->
<span class="alphabet-uppercase-lowercase-textbox_note">
小文字で入力すると大文字へ変換されます。
</span>
</div>
<!-- 小文字変換エリア -->
<div class="alphabet-uppercase-lowercase-textbox_group">
<!-- 小文字変換のラベル -->
<label
class="alphabet-uppercase-lowercase-textbox_label"
for="lowercase-input">
小文字へ自動変換
</label>
<!-- 入力文字を小文字へ変換するテキストボックス -->
<input
class="alphabet-uppercase-lowercase-textbox_input"
id="lowercase-input"
name="lowercase-input"
type="text"
placeholder="例：USER@EXAMPLE.COM">
<!-- 小文字変換の説明 -->
<span class="alphabet-uppercase-lowercase-textbox_note">
大文字で入力すると小文字へ変換されます。
</span>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでテキストボックスを配置し、CSSで見た目を整え、JavaScriptで入力されたアルファベットをリアルタイムに大文字または小文字へ自動変換します。シンプルな構成のため、初心者でも内容を把握しやすく、そのままWebページへ導入できます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlでは、大文字変換用と小文字変換用のテキストボックスを配置しています。タイトルや説明文、ラベル、プレースホルダーの文章を編集すると表示内容を変更できます。
style.cssでは、フォーム全体のレイアウトやテキストボックスの色、枠線、余白、角丸などのデザインを管理しています。フォーカス時の枠線色やレスポンシブ表示もこのファイルで設定しています。
script.jsでは、入力イベントを利用してアルファベットをリアルタイムで大文字または小文字へ変換しています。変換処理を変更したい場合は、このファイルを編集します。
設置方法・使い方
sampleフォルダ内の3ファイルを同じ階層へ配置してください。配置後はsample/index.htmlをブラウザで開くだけで利用できます。上側のテキストボックスでは入力したアルファベットが自動で大文字へ、下側のテキストボックスでは自動で小文字へ変換されます。
カスタマイズできる内容
index.htmlではタイトルや説明文、ラベル、プレースホルダーを変更できます。style.cssでは背景色、文字色、枠線、角丸、余白、文字サイズなどを自由に編集できます。script.jsでは大文字変換・小文字変換の対象となるテキストボックスを変更したり、変換処理を別の入力欄へ適用したりできます。
数値調整
style.cssのmax-width:700px;を変更するとフォーム全体の最大横幅を調整できます。padding:32px;を変更すると内側の余白が変わります。border-radius:18px;を変更すると角丸の大きさを調整できます。transition:border-color 0.3s ease;の0.3秒は枠線色が切り替わる時間を表し、値を大きくするとゆっくり、小さくすると速く切り替わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssではwidth:100%とmax-widthを組み合わせて画面幅に応じてフォームサイズを自動調整しています。また、640px以下ではメディアクエリにより余白を縮小し、スマートフォン・タブレット・PCでも見やすく操作しやすいレイアウトで利用できます。
コメント