半角でフォームに入力したら自動で全角に変換するJavascrpt作った

2025/12/09

WEBデザイン

このページのリンクには一部広告が含まれています。

フォーム入力した半角英数字を自動で全角変換するスクリプトを作ってみました。

目次 [ close ]

最近住所を入力する際に全角指定が多い

住所を入力する際に番地とか建物名とか全角で入力しないとエラーになるフォームをやたら見かけるようになった気がします。

パソコンで入力する場合はそれほど大変ではないですが、スマートフォンで数字やアルファベットを全角で入力しようとすると「日本語ローマ字」のキーボードを設定をしたりしなければならず、めんどくさいことになります。

全角じゃないと問題が起きるのでそうしているんだと思いますが、使う側からすればいい迷惑で、そっちで勝手に変換しろよっていつも思いますがそうはいかない理由があるのでしょう。

行政関連のフォームに多いのかもしれません。
昨今のDX化、デジタル化によって行政の手続きがオンラインでできるようになりましたが、行政内部のシステムがアップデートされておらず、昔の名残で対応できていないというのが大きな理由だと思います。

バックエンドで自動変換するといった処理をするのが難しいなら、せめてフロントエンドで変換してデータを送ればいいということで簡単ですがJavascritで変換できるようにしてみました。

全角→半角変換

英数字に加えて記号等も全角に変換されます。

Javascript

/**
 * Zenkaku.js
 * 半角英数を自動的に全角に変換します。
 */
(function () {
    function toFullWidth(str) {
        return str.replace(/[!-~]/g, function (s) {
            if (s === '\\') return '￥';
            return String.fromCharCode(s.charCodeAt(0) + 0xFEE0);
        });
    }

    function init() {
        //変換したい入力欄のCSSセレクターを指定
        const inputs = document.querySelectorAll('.js-zenkaku-auto');
        inputs.forEach(input => {
            input.addEventListener('blur', function () {
                this.value = toFullWidth(this.value);
            });
        });
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();

HTML

<div class="form-group">
    <label for="input1">全角へ自動変換 (フォーカスアウト時)</label>
    <input type="text" id="input1" class="js-zenkaku-auto" placeholder="半角英数を入力してください...">
    <div class="hint">入力欄からフォーカスを外すと変換されます</div>
</div>

動作デモ

全角へ自動変換 (フォーカスアウト時)

入力欄からフォーカスを外すと変換されます

全角→半角

逆に全角を半角に変換するスクリプトも作りました。

Javascript

/**
 * Hankaku.js
 * 全角英数を自動的に半角に変換します。
 */
(function () {
    function toHalfWidth(str) {
        return str.replace(/[！-～￥]/g, function (s) {
            if (s === '￥') return '\\';
            return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
        });
    }

    function init() {
        //変換したい入力欄のCSSセレクターを指定
        const inputs = document.querySelectorAll('.js-hankaku-auto');
        inputs.forEach(input => {
            input.addEventListener('blur', function () {
                this.value = toHalfWidth(this.value);
            });
        });
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();

HTML

<div class="form-group">
    <label for="input3">半角へ自動変換 (フォーカスアウト時)</label>
    <input type="text" id="input3" class="js-hankaku-auto" placeholder="全角英数を入力してください...">
    <div class="hint">入力欄からフォーカスを外すと変換されます (例: ａｂｃ１２３)</div>
</div>