inputに入力された全角数字を半角数字にリアルタイム変換するjavascriptとその仕組み（jQuery不使用）

※本ページはプロモーションが含まれています

はじめに

フォームで入力欄に全角数字だけを入力してほしいときがあります。

javascriptでリアルタイム変換が可能なのでひと手間かけて処理を追加しておくと間違いが減ってよりよいフォームになるでしょう。

今回はjQueryは使用しないで処理を行うスクリプトです。

コードのサンプル

早速コードのサンプルです。

①”oninput”属性を利用する場合

<input type="text" name="input-sample-1" oninput="value = NumberOnly(value)">
<script>
function NumberOnly(v) {
    return v.replace(/[０-９]/g, (s) => String.fromCharCode(s.charCodeAt(0) - 65248));
}
</script>

②jsイベントもscriptタグ内で指定する場合

<input type="text" name="input-sample-2" class="js-input-number">
<script>
window.addEventListener('DOMContentLoaded', function() {
    const input_target = document.querySelector('.js-input-number');
    input_target.addEventListener('input', () => {
        const v = input_target.value;
        input_target.value = NumberOnly(v);
    });
});
function NumberOnly(v) {
    return v.replace(/[０-９]/g, (s) => String.fromCharCode(s.charCodeAt(0) - 65248));
}
</script>

コードの詳細と注意点

対象イベントは”input”。”keyup”はダメ

リアルタイムで変換する際にはinputとkeyupイベントが選択肢にあがりますがkeyupイベントはNGです。
firefoxでは問題ありませんがchromeで意図通り動きません。

変換関数内にある”String.fromCharCode”と”charCodeAt(0)”

String.fromCharCode()

String.fromCharCode()は指定されたUnicode（UTF-16）から文字列を返す関数です。
UTF-16のテーブルを見ればわかるのですが文字には特定の数字が割り当てられています。
「A」は65、「B」は66、「C」は67と数字が割り当てられているので
String.fromCharCode(65, 66, 67)は「ABC」を返します。

▼UTF-16テーブル
https://tools.m-bsys.com/ex/unicode_table.php

※「Unicodeを10進数で表示」を選択

charCodeAt()

String.charCodeAt()は引数にインデックスを指定してそのインデックスで指定した位置にある文字のコードを返します。
s.charCodeAt(0)はインデックスが0なので文字列が入っている変数「s」の最初の文字のコードを返すことになります。

なぜ65248を引いているの？

UTF-16 テーブルを見るとわかりますが

UTF-16文字コード表では
0 = 48,1 = 49,2 = 50 ～ 9 = 57となります。
これに対して全角の数字は
０ = 65296,１ = 65297,２ = 60298 ～ 9 = 65305となります。

全角を半角に変換するには０なら65296を48にしたいので（65296 – 48）= 65248。
65248を引いた文字コードにすれば良いことになるので65248という数字が現れるのです。

結局、関数NumberOnlyは何をしているかというと

• inputイベント発生時に
• 入力値の全角の数字にマッチする
• 一文字目のUTF-16文字コードから65248を引いた文字コードを
• 文字に変換して返す

という処理を行っています。