数字の全角・半角を自動変換するテキストエリアを作る方法
数字の全角・半角を自動変換するテキストエリアを作る方法を紹介します。このサンプルでは、JavaScriptを使用して入力した数字をリアルタイムで変換します。全角数字を半角数字へ変換するテキストエリアと、半角数字を全角数字へ変換するテキストエリアの2種類を用意しているため、用途に合わせて利用できます。入力中に自動変換されるため、利用者が変換作業を行う必要がなく、入力内容を統一したいフォームで便利に利用できます。
会員サイトの登録フォーム、お問い合わせ画面、管理画面のデータ入力、ECサイトの商品管理画面など、数字の表記を統一したい場面で活用できます。郵便番号、電話番号、商品番号、会員番号などを半角へ統一したい場合や、帳票や社内システムで全角数字へ揃えたい場合にも便利です。入力と同時に変換されるため、送信前に修正する手間を減らし、入力ミスの防止にも役立ちます。
タイトル、説明文、ラベル、プレースホルダーはHTMLから変更でき、CSSでは横幅、余白、文字サイズ、背景色、枠線、角丸などを自由に調整できます。JavaScriptの変換処理を変更することで、全角から半角、半角から全角のどちらか一方だけを利用することも可能です。レスポンシブにも対応しているため、スマートフォン・タブレット・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="number-fullwidth-halfwidth-textarea_wrap">
<!-- タイトル -->
<div class="number-fullwidth-halfwidth-textarea_title">
数字を自動変換
</div>
<!-- 説明文 -->
<p class="number-fullwidth-halfwidth-textarea_text">
入力した数字をリアルタイムで半角または全角へ自動変換します。
</p>
<!-- 半角数字への変換グループ -->
<div class="number-fullwidth-halfwidth-textarea_group">
<!-- 半角変換用ラベル -->
<label
class="number-fullwidth-halfwidth-textarea_label"
for="halfwidth-textarea">
半角数字へ自動変換
</label>
<!-- 全角数字を半角数字へ変換するテキストエリア -->
<textarea
id="halfwidth-textarea"
name="halfwidth-textarea"
class="number-fullwidth-halfwidth-textarea_input"
placeholder="例：１２３４５６７８９０"></textarea>
<!-- 半角変換の補足文 -->
<span class="number-fullwidth-halfwidth-textarea_note">
全角数字で入力すると半角数字へ変換されます。
</span>
</div>
<!-- 全角数字への変換グループ -->
<div class="number-fullwidth-halfwidth-textarea_group">
<!-- 全角変換用ラベル -->
<label
class="number-fullwidth-halfwidth-textarea_label"
for="fullwidth-textarea">
全角数字へ自動変換
</label>
<!-- 半角数字を全角数字へ変換するテキストエリア -->
<textarea
id="fullwidth-textarea"
name="fullwidth-textarea"
class="number-fullwidth-halfwidth-textarea_input"
placeholder="例：1234567890"></textarea>
<!-- 全角変換の補足文 -->
<span class="number-fullwidth-halfwidth-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は入力された数字を変換するファイルです。半角変換用のテキストエリアでは全角数字の文字コードから65248を引き、全角変換用のテキストエリアでは半角数字の文字コードへ65248を加えます。数字以外の文字や改行はそのまま残ります。
設置方法・使い方
sampleフォルダを作成し、その中へindex.html・style.css・script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。上側のテキストエリアへ全角数字を入力すると半角数字へ変換され、下側のテキストエリアへ半角数字を入力すると全角数字へ変換されます。文字を入力または貼り付けるたびに変換処理が実行されます。
カスタマイズできる内容
index.htmlではページタイトル、フォーム内のタイトル、説明文、「半角数字へ自動変換」「全角数字へ自動変換」のラベル、プレースホルダー、各入力欄の補足文を変更できます。電話番号、郵便番号、商品番号、会員番号など、入力する内容に合わせて表示を編集できます。
style.cssではページとフォームの背景色、最大横幅、余白、枠線、角丸、テキストエリアの高さ、入力文字のサイズや行間、フォーカス時の枠線色を変更できます。resize:vertical;を変更すると、利用者によるテキストエリアの高さ変更方法も調整できます。
script.jsで変換対象を変更する場合は、index.htmlのIDとgetElementById()へ指定するIDを一致させます。半角変換だけを使用する場合は全角変換用の入力欄と処理を削除し、全角変換だけを使用する場合は半角変換用の入力欄と処理を削除できます。
数値調整
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:20px;
半角変換用と全角変換用の入力グループの間隔です。値を大きくすると2つの入力欄が離れ、小さくすると近くなります。
margin-bottom:8px;
ラベルとテキストエリアの間隔です。8pxを大きくすると間隔が広がり、小さくすると近くなります。
min-height:140px;
テキストエリアの初期の最低高さです。値を大きくすると最初から高く表示され、小さくすると低くなります。
padding:14px 16px;
テキストエリアの内側余白です。14pxは上下、16pxは左右の余白を表します。値を大きくすると入力文字と枠線の間隔が広がります。
border:2px solid #cbd5e1;
テキストエリアの通常時の枠線です。2pxを大きくすると枠線が太くなり、小さくすると細くなります。
border-radius:10px;
テキストエリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
line-height:1.7;
テキストエリア内の入力文字の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
transition:border-color 0.3s ease;
テキストエリアの枠線色が切り替わる時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く切り替わります。
margin-top:8px;
テキストエリアと補足文の間隔です。8pxを大きくすると間隔が広がり、小さくすると近くなります。
font-size:14px;
補足文の文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
line-height:1.6;
補足文の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
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は左右の余白を表します。
script.js
65248
全角数字と半角数字の文字コードの差です。半角変換では文字コードから65248を引き、全角変換では65248を加えます。この値を変更すると正しく数字を変換できなくなるため、通常は変更しません。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、画面幅に合わせてフォーム全体が縮小されます。また、画面幅640px以下ではページとフォームの余白、テキストエリアの最低高さと内側余白を小さくするメディアクエリを設定しているため、スマートフォン・タブレット・PCで利用できます。
コメント