JSでいろいろな文字入力制御に対応してみた

背景

自社サービスにて、細かい入力制御をする必要がありました。
特に銀行口座の名義人カナ入力にて、半角カナ入力時に、小文字(ｧなど)は大文字(ｱなど)に直す必要があったり、ｰ(長音)は-(ハイフン)に直す必要があったりしたので、
そのあたりも含めいろいろ対応してみました。

動作例

ひらがなのみに変換

ひらがな以外を入力しようとしてもできないようになっています。少し分かりにくいのですが、最後の「エンジニア」はカタカナに変換して確定後、ひらがなに変換されています。

半角カナ大文字(+ハイフン)のみに変換

以下のように「フットボール」と入力した場合、「ﾌﾂﾄﾎﾞ-ﾙ」に変換されます。

https://github.com/koda-h/input-validate-js
こちらをdocker-composeで動かすことによって、以下の入力制限の動作デモが可能です。

• ひらがなのみに変換(スペース含む)
• 半角カナのみに変換(スペース含む)
• 口座振替で許容する半角カナのみに変換(スペース含む)
• 全角カナのみに変換(スペース含む)
• 全角のみに変換(スペース含む)
• 全角のみに変換(スペース含む・記号は許可しない)
• 半角カナ大文字のみに変換(スペース含む)
• 半角カナ大文字のみに変換(長音はハイフンマイナスに変換)(スペース含む)
• 半角カナ大文字英数のみに変換(長音はハイフンマイナスに変換)(スペース含む)
• 半角英数に変換(スペース除去)
• 半角英数記号に変換(スペース除去)
• 半角英数に変換(スペース含む)
• 半角数字に変換(スペース除去)
• 半角数字に変換(スペース含む)
• 半角数字(0以上の整数)に変換(スペース除去)
• 半角数字(0以上の整数)に変換(スペース除去) ピリオドあり
• 電話番号文字列(半角数字+ハイフンマイナス)に変換(スペース除去)
• 電話番号にハイフンを付与

利用方法

必要なもの

• moji.js
• https://raw.githubusercontent.com/koda-h/input-validate-js/master/public/input-validate.js

コード記述例

<input name="hiragana" type="text" value="">

<script>
    var isComposing = false;
    // ひらがなのみに変換(スペース含む)
    $('[name="hiragana"]').on('keyup blur compositionstart compositionend', function (event) {
        // 3番目の引数で最大入力文字数を制御
        convert_hiragana(this, event.type, 30);
    });
</script>

https://github.com/koda-h/input-validate-js/blob/master/public/index.html
こちらにも記述例があるのでご参照ください。

解説

compositionstart, compositionend はIMEによるテキスト編集監視に用いるイベントです。
global に var isComposing; を定義し、
compositionstart (IME入力中)のタイミングでは isComposing = true;とします。
この状態で keyup, blur イベントを検出した場合は、変換を行います(※1)。
そして、 compositionend (IME入力後Enter押下)のタイミングで isComposing = false;とし、この状態では変換しないようにします(※1)。
(※1) ここの部分

参考

• https://qiita.com/darai0512/items/fac4f166c23bf2075deb