全角数字を半角に・半角数字を全角に自動変換するテキストフィールドを作る方法
テキストフィールドへ入力した全角数字を半角数字へ、半角数字を全角数字へ自動変換する方法を紹介します。2つのテキストフィールドを用意し、一方では全角数字を半角へ、もう一方では半角数字を全角へ変換します。文字を入力するとすぐに変換されるため、変換ボタンを押す必要はありません。
このサンプルではHTMLで1行入力用のテキストフィールドを配置し、CSSで入力欄のデザインを整え、JavaScriptで数字の全角・半角を変換します。入力内容を数字だけに制限するのではなく、対象となる数字だけを変換する仕組みです。そのため、日本語やアルファベット、記号などはそのまま残せます。
商品番号や管理番号、受付番号など、数字の表記を統一したい入力フォームに利用できます。入力する人によって全角数字と半角数字が混在する場合でも、入力時に指定した形式へ自動変換できるため、お問い合わせフォーム、会員登録画面、ECサイト、管理画面などにも応用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
入力した数字だけを指定した形式へ自動変換します。
上のテキストフィールドでは全角数字が半角数字へ、下のテキストフィールドでは半角数字が全角数字へ自動変換されます。日本語やアルファベット、記号などはそのまま残ります。
コードをコピーして使おう！
<!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="number-fullwidth-halfwidth-text-field_wrap">
<!-- 入力エリアのタイトル -->
<div class="number-fullwidth-halfwidth-text-field_title">
数字の全角・半角を自動変換
</div>
<!-- 入力方法を案内する説明文 -->
<p class="number-fullwidth-halfwidth-text-field_text">
入力した数字だけを指定した形式へ自動変換します。
</p>
<!-- 全角数字から半角数字へ変換する入力エリア -->
<div class="number-fullwidth-halfwidth-text-field_group">
<!-- 全角から半角へ変換するテキストフィールドのラベル -->
<label
class="number-fullwidth-halfwidth-text-field_label"
for="number-fullwidth-halfwidth-text-field-half">
全角数字 → 半角数字
</label>
<!-- 全角数字を半角数字へ変換するテキストフィールド -->
<input
class="number-fullwidth-halfwidth-text-field_input"
id="number-fullwidth-halfwidth-text-field-half"
name="half-number"
type="text"
placeholder="例：商品１２３-A"
>
</div>
<!-- 半角数字から全角数字へ変換する入力エリア -->
<div class="number-fullwidth-halfwidth-text-field_group">
<!-- 半角から全角へ変換するテキストフィールドのラベル -->
<label
class="number-fullwidth-halfwidth-text-field_label"
for="number-fullwidth-halfwidth-text-field-full">
半角数字 → 全角数字
</label>
<!-- 半角数字を全角数字へ変換するテキストフィールド -->
<input
class="number-fullwidth-halfwidth-text-field_input"
id="number-fullwidth-halfwidth-text-field-full"
name="full-number"
type="text"
placeholder="例：商品123-A"
>
</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フォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。上のテキストフィールドへ全角数字を入力すると半角数字へ変換され、下のテキストフィールドへ半角数字を入力すると全角数字へ変換されます。
カスタマイズできる内容
index.htmlではタイトル、説明文、ラベル、プレースホルダー、name属性などを変更できます。商品番号、管理番号、受付番号など、数字の表記を統一したい入力欄へ利用できます。
style.cssでは全体の横幅、背景色、余白、文字サイズ、枠線、角丸、テキストフィールドの内側余白、フォーカス時の枠線色や強調表示などを変更できます。
script.jsでは/[０-９]/gに一致する全角数字を半角数字へ、/[0-9]/gに一致する半角数字を全角数字へ変換しています。日本語やアルファベット、記号など、変換対象ではない文字はそのまま残ります。
数値調整
style.css
max-width:700px;
フォーム全体の最大横幅です。値を大きくすると横幅が広がり、小さくするとコンパクトになります。
padding:32px;
フォーム全体の内側余白です。値を大きくすると内容との間隔が広がり、小さくすると詰まった表示になります。
font-size:28px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
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でも利用できます。
コメント