数字の全角・半角を自動変換するテキストボックスを作る方法
数字の全角・半角を自動変換するテキストボックスを作る方法を紹介します。このサンプルでは、入力した数字をリアルタイムで全角または半角へ自動変換するテキストボックスを実装しています。HTML・CSS・JavaScriptだけで動作するため、ライブラリを追加することなく手軽に導入できます。
デモでは「全角へ自動変換」と「半角へ自動変換」の2種類を用意しています。アンケートフォームや会員登録画面では全角数字で統一したい場合があり、電話番号や郵便番号、商品番号、数量などは半角数字で入力してほしいケースが多くあります。入力時に自動変換することで表記ゆれを防ぎ、入力ルールを統一しやすくなります。
お問い合わせ画面、管理画面、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="number-fullwidth-halfwidth-textbox_wrap">
<!-- タイトル -->
<h1 class="number-fullwidth-halfwidth-textbox_title">
数字を自動変換
</h1>
<!-- 説明文 -->
<p class="number-fullwidth-halfwidth-textbox_text">
入力した数字が、全角または半角へリアルタイムで変換されます。
</p>
<!-- 全角数字への変換エリア -->
<div class="number-fullwidth-halfwidth-textbox_group">
<!-- 全角変換のラベル -->
<label
class="number-fullwidth-halfwidth-textbox_label"
for="fullwidth-input">
全角へ自動変換
</label>
<!-- 半角数字を全角数字へ変換するテキストボックス -->
<input
class="number-fullwidth-halfwidth-textbox_input"
id="fullwidth-input"
name="fullwidth-input"
type="text"
inputmode="numeric"
placeholder="例：1234567890">
<!-- 全角変換の説明 -->
<span class="number-fullwidth-halfwidth-textbox_note">
半角数字で入力すると全角数字へ変換されます。
</span>
</div>
<!-- 半角数字への変換エリア -->
<div class="number-fullwidth-halfwidth-textbox_group">
<!-- 半角変換のラベル -->
<label
class="number-fullwidth-halfwidth-textbox_label"
for="halfwidth-input">
半角へ自動変換
</label>
<!-- 全角数字を半角数字へ変換するテキストボックス -->
<input
class="number-fullwidth-halfwidth-textbox_input"
id="halfwidth-input"
name="halfwidth-input"
type="text"
inputmode="numeric"
placeholder="例：１２３４５６７８９０">
<!-- 半角変換の説明 -->
<span class="number-fullwidth-halfwidth-textbox_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では、全角変換用と半角変換用のテキストボックスを配置しています。タイトルや説明文、ラベル、プレースホルダーを変更すると表示内容を自由に編集できます。
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でも見やすく快適に利用できます。
コメント