LoginSignup
5

More than 1 year has passed since last update.

Organization

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

背景

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

動作例

ひらがなのみに変換

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

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

以下のように「フットボール」と入力した場合、「フツトボ-ル」に変換されます。
画面収録 2020-12-05 18.44.55.mov.gif

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

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

利用方法

必要なもの

コード記述例

<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) ここの部分

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
5