全角数字を半角に・半角数字を全角に自動変換するテキストエリアを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

入力タイプ・ラベル・プレースホルダー・サイズ・色・余白・枠線などを設定して、HTML・CSSを自動生成できます。

全角数字を半角に・半角数字を全角に自動変換するテキストエリアを作る方法

全角数字を半角に、半角数字を全角に自動変換するテキストエリアを作る方法を紹介します。このサンプルでは、JavaScriptでテキストエリアへの入力を検知し、上の入力欄では全角数字を半角数字へ、下の入力欄では半角数字を全角数字へリアルタイムで変換します。たとえば「１２３４５」と入力すると「12345」に、「12345」と入力すると「１２３４５」に自動変換されるため、数字の表記を一定の形式にそろえられます。

お問い合わせ画面や会員サイトの登録フォーム、ECサイトの商品情報入力、管理画面のデータ入力など、数字の全角・半角を統一したい場面で利用できます。入力した数字だけが変換対象となり、それ以外の文字を削除する処理は行わないため、文章や記号などが含まれている場合はそのまま残ります。利用者が入力後に数字を一つずつ修正する必要がなく、入力と同時に指定した形式へ変換できるのが特徴です。

HTMLでは「半角数字へ自動変換」「全角数字へ自動変換」のラベルや説明文、プレースホルダーを変更でき、CSSではフォーム全体の横幅、余白、背景色、枠線、角丸、テキストエリアの高さなどを調整できます。画面幅640px以下ではフォーム内の余白を小さくするレスポンシブ設定も行っているため、スマートフォン・タブレット・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>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との間隔が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
}

/* 入力フォーム全体 */
.number-fullwidth-halfwidth-textarea_wrap{
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:700px; /* 最大横幅。値を大きくするとフォーム全体が横に広がる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 内側余白。値を大きくすると内容と枠線の間隔が広がる */
  border:1px solid #dbe4f0; /* フォーム全体を囲む枠線。1pxを大きくすると太くなる */
  border-radius:18px; /* フォーム全体の角丸。値を大きくすると丸みが強くなる */
  background:#f8fbff; /* フォーム全体の背景色 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* タイトル */
.number-fullwidth-halfwidth-textarea_title{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
  color:#111827; /* タイトルの文字色 */
  font-size:22px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルの太さ。値を大きくすると文字が太くなる */
  line-height:1.5; /* タイトルの行間。値を大きくすると行間が広がる */
  text-align:center; /* タイトルを中央揃えにする */
}

/* 説明文 */
.number-fullwidth-halfwidth-textarea_text{
  margin:0 0 24px; /* 下側24pxの余白。値を大きくすると入力項目との間隔が広がる */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ。値を大きくすると文字が大きくなる */
  line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
  text-align:center; /* 説明文を中央揃えにする */
}

/* 各入力グループ */
.number-fullwidth-halfwidth-textarea_group{
  margin-bottom:20px; /* 下側20pxの余白。値を大きくすると2つの入力欄の間隔が広がる */
}

/* 最後の入力グループ */
.number-fullwidth-halfwidth-textarea_group:last-child{
  margin-bottom:0; /* 最後の入力グループには下側余白を付けない */
}

/* ラベル */
.number-fullwidth-halfwidth-textarea_label{
  display:block; /* ラベルをブロック要素として表示 */
  margin-bottom:8px; /* 下側8pxの余白。値を大きくすると入力欄との間隔が広がる */
  color:#111827; /* ラベルの文字色 */
  font-size:16px; /* ラベルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* ラベルの太さ。値を大きくすると文字が太くなる */
  line-height:1.5; /* ラベルの行間。値を大きくすると行間が広がる */
}

/* テキストエリア */
.number-fullwidth-halfwidth-textarea_input{
  display:block; /* テキストエリアをブロック要素として表示 */
  width:100%; /* 親要素の横幅いっぱいに表示 */
  min-height:140px; /* 初期の最低高さ。値を大きくすると最初から高く表示される */
  padding:14px 16px; /* 上下14px・左右16px。値を大きくすると文字と枠線の間隔が広がる */
  border:2px solid #cbd5e1; /* 通常時の枠線。2pxを大きくすると枠線が太くなる */
  border-radius:10px; /* テキストエリアの角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* テキストエリアの背景色 */
  color:#111827; /* 入力文字の色 */
  font-family:inherit; /* ページ全体と同じフォントを使用 */
  font-size:16px; /* 入力文字のサイズ。値を大きくすると文字が大きくなる */
  line-height:1.7; /* 入力文字の行間。値を大きくすると行間が広がる */
  resize:vertical; /* 上下方向のみ手動で高さを変更できる */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
  outline:none; /* ブラウザ標準の外枠を非表示 */
  transition:border-color 0.3s ease; /* 0.3秒で枠線色を切り替える。値を大きくすると遅く、小さくすると速くなる */
}

/* プレースホルダー */
.number-fullwidth-halfwidth-textarea_input::placeholder{
  color:#9ca3af; /* プレースホルダーの文字色 */
  opacity:1; /* プレースホルダーを完全な不透明状態で表示 */
}

/* テキストエリアへフォーカスした状態 */
.number-fullwidth-halfwidth-textarea_input:focus{
  border-color:#2563eb; /* フォーカス時の枠線色 */
}

/* 補足文 */
.number-fullwidth-halfwidth-textarea_note{
  display:block; /* 補足文をブロック要素として表示 */
  margin-top:8px; /* 上側8pxの余白。値を大きくすると入力欄との間隔が広がる */
  color:#64748b; /* 補足文の文字色 */
  font-size:14px; /* 補足文の文字サイズ。値を大きくすると文字が大きくなる */
  line-height:1.6; /* 補足文の行間。値を大きくすると行間が広がる */
}

/* 画面幅640px以下 */
@media screen and (max-width:640px){

  /* スマートフォン表示時のページ全体 */
  body{
    padding:24px 12px; /* 上下24px・左右12pxへ縮小 */
  }

  /* スマートフォン表示時の入力フォーム全体 */
  .number-fullwidth-halfwidth-textarea_wrap{
    margin:24px auto; /* 上下余白を24pxへ縮小 */
    padding:24px 18px; /* 上下24px・左右18pxへ縮小 */
  }

  /* スマートフォン表示時のテキストエリア */
  .number-fullwidth-halfwidth-textarea_input{
    min-height:130px; /* 初期の最低高さを130pxへ縮小 */
    padding:13px 14px; /* 上下13px・左右14pxへ縮小 */
  }

}

// 半角数字への変換用テキストエリアを取得
const halfwidthTextarea=
  document.getElementById("halfwidth-textarea");

// 全角数字への変換用テキストエリアを取得
const fullwidthTextarea=
  document.getElementById("fullwidth-textarea");

/*
  半角変換用テキストエリアへ入力されたときに
  全角数字だけを半角数字へ変換する
*/
halfwidthTextarea.addEventListener("input",function(){

  // 全角数字を1文字ずつ取得して半角数字へ置き換える
  halfwidthTextarea.value=
    halfwidthTextarea.value.replace(/[０-９]/g,function(character){

      // 文字コードから65248を引いて対応する半角数字へ変換する
      return String.fromCharCode(
        character.charCodeAt(0)-65248
      );

    });

});

/*
  全角変換用テキストエリアへ入力されたときに
  半角数字だけを全角数字へ変換する
*/
fullwidthTextarea.addEventListener("input",function(){

  // 半角数字を1文字ずつ取得して全角数字へ置き換える
  fullwidthTextarea.value=
    fullwidthTextarea.value.replace(/[0-9]/g,function(character){

      // 文字コードへ65248を足して対応する全角数字へ変換する
      return String.fromCharCode(
        character.charCodeAt(0)+65248
      );

    });

});

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは、全角数字を半角数字へ変換するテキストエリアと、半角数字を全角数字へ変換するテキストエリアを配置します。CSSではフォーム全体や入力欄の見た目を整え、JavaScriptでは入力された全角数字を半角数字へ、半角数字を全角数字へリアルタイムで変換します。

sample/
├── index.html
├── style.css
└── script.js

各ファイルの役割
index.htmlは入力フォーム全体を構成するファイルです。「全角数字・半角数字を自動変換」のタイトルと説明文を表示し、「全角数字 → 半角数字」「半角数字 → 全角数字」の2つのテキストエリアを配置しています。それぞれのラベル、プレースホルダー、補足文もHTMLから変更できます。

style.cssはページ全体、フォーム、タイトル、説明文、ラベル、テキストエリア、補足文のデザインを設定するファイルです。フォームの最大横幅や余白、背景色、枠線、角丸、テキストエリアの高さ、文字サイズ、フォーカス時の枠線色などを変更できます。

script.jsは数字の全角・半角を変換するファイルです。「全角数字 → 半角数字」のテキストエリアでは全角数字の文字コードから65248を引き、「半角数字 → 全角数字」のテキストエリアでは半角数字の文字コードへ65248を加えて変換します。数字以外の文字や記号、改行は変換せず、そのまま残ります。

設置方法・使い方
sampleフォルダを作成し、その中へindex.html・style.css・script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。上側のテキストエリアへ「１２３４５」のような全角数字を入力すると「12345」のような半角数字へ変換され、下側のテキストエリアへ「12345」のような半角数字を入力すると「１２３４５」のような全角数字へ変換されます。入力や貼り付けを行うたびに変換処理が実行されます。

カスタマイズできる内容
index.htmlではページタイトル、フォーム内のタイトル、説明文、「全角数字 → 半角数字」「半角数字 → 全角数字」のラベル、プレースホルダー、補足文を変更できます。電話番号、郵便番号、商品番号、会員番号など、使用する入力内容に合わせて表示する文章を編集できます。

style.cssではページやフォームの背景色、最大横幅、余白、枠線、角丸、テキストエリアの高さ、入力文字のサイズや行間、フォーカス時の枠線色などを変更できます。resize:vertical;では、テキストエリアを上下方向へ手動で高さ変更できるようにしています。

script.jsでは、上側のテキストエリアに入力された全角数字だけを半角数字へ、下側のテキストエリアに入力された半角数字だけを全角数字へ変換しています。HTML側のテキストエリアのIDを変更する場合は、script.jsのgetElementById()に指定しているIDも同じ名前へ変更してください。

数値調整
style.css

padding:40px 20px;
ページ全体の内側余白です。40pxは上下、20pxは左右の余白を表します。値を大きくすると画面端との間隔が広がり、小さくすると狭くなります。

max-width:700px;
フォーム全体の最大横幅です。値を大きくするとフォームを広く表示でき、小さくするとコンパクトになります。

margin:40px auto;
フォーム全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。autoによってフォームを左右中央へ配置します。

padding:32px;
フォーム全体の内側余白です。値を大きくすると内容と外側の枠線との間隔が広がり、小さくすると狭くなります。

border:1px solid #dbe4f0;
フォーム全体の枠線です。1pxを大きくすると枠線が太くなります。#dbe4f0を変更すると枠線の色を変更できます。

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;
ラベルとテキストエリアの間隔です。値を大きくすると間隔が広がり、小さくすると狭くなります。

min-height:140px;
テキストエリアの最低高さです。値を大きくすると入力欄が高く表示され、小さくすると低くなります。

padding:14px 16px;
テキストエリアの内側余白です。14pxは上下、16pxは左右の余白です。値を大きくすると入力文字と枠線との間隔が広がります。

border:2px solid #cbd5e1;
テキストエリアの通常時の枠線です。2pxを大きくすると枠線が太くなります。#cbd5e1を変更すると枠線の色を変更できます。

border-radius:10px;
テキストエリアの角丸です。値を大きくすると丸みが強くなり、0にすると角丸がなくなります。

line-height:1.7;
テキストエリア内の入力文字の行間です。値を大きくすると行間が広がり、小さくすると狭くなります。

transition:border-color 0.3s ease;
テキストエリアを選択したときに枠線色が切り替わる時間です。0.3秒を大きくするとゆっくり変化し、小さくすると速く変化します。

margin-top: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を加えます。変換処理に必要な値のため、通常は変更しません。

レスポンシブ対応
このサンプルはレスポンシブ対応です。フォームにはwidth:100%とmax-width:700pxを設定しているため、広い画面では最大700pxで表示し、狭い画面では利用できる横幅に合わせて縮小します。また、画面幅640px以下ではページとフォームの余白、テキストエリアの最低高さと内側余白を小さくする設定へ切り替わります。