【JavaScript】フォーム入力中に'-'を自動で追加する（めも）

郵便番号を入力するとき、ハイフンが自動挿入された方が親切かな。
と言うことで、入力中に自動で'-(ハイフン)'入れる機能を試してみました。
その時のメモです。

こちらも間違っているなどあれば指摘いただけると嬉しいです！

郵便番号の入力フォームイメージ

完成イメージです。
こんな感じで4桁目に'-'ハイフンを入力したい。

コードサンプル

実際に仕込んだjsは↓のとおり。

sample.js

$(function(){

  //郵便番号にハイフンを自動挿入するメソッド
  function insertStr(input){
    return input.slice(0, 3) + '-' + input.slice(3,input.length);
  }

  //入力時に郵便番号に自動でハイフンを付けるイベント
  $("#user_address_attributes_postal_code").on('keyup',function(e){
    var input = $(this).val();

    //削除キーではハイフン追加処理が働かないように制御（8がBackspace、46がDelete)
    var key = event.keyCode || event.charCode;
    if( key == 8 || key == 46 ){
      return false;
    }

    //３桁目に値が入ったら発動
    if(input.length === 3){
      $(this).val(insertStr(input));
    }
  });

  //フォーカスが外れた際、本当に4桁目に'-'がついているかチェック。なければ挿入するイベント
  //これでコピペした場合にも反応できるハズ？
  $("#user_address_attributes_postal_code").on('blur',function(e){
    var input = $(this).val();

    //４桁目が'-(ハイフン)’かどうかをチェックし、違ったら挿入
    if(input.length >= 3 && input.substr(3,1) !== '-'){
      $(this).val(insertStr(input));
    }
  });
}

sample.html.haml

= fields.text_field :postal_code, class:'xxxx', placeholder:'例) 123-4567',maxlength:'8'

html側で桁数指定してあげると親切かと。

クレジットカードも何となく行けそうかな。
Payjpのまとめをする時に合わせてメモしようかと思います。

以上

参考

「[JavaScript] 文字列の指定位置に文字を挿入・削除する」
　: https://javascript.programmer-reference.com/js-string-insert/
「javascript – “入力”イベントのバックスペースとデルを検出しますか？」
　: https://codeday.me/jp/qa/20181223/81200.html
「押したキーのキーコードを取得」
　: http://shanabrian.com/web/javascript/keycode.php