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

2023年11月12日2024年2月24日

HTML javascript

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

はじめに
コードのサンプル
コードの詳細と注意点

はじめに

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

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進数で表示」を選択