【JavaScript】テキストボックスに入力した数値をリアルタイムにカンマ区切りにする

概要

金額を入力するテキストボックスを設置するにあたって、入力した数値をリアルタイムにカンマ区切りにするようにしてみたので、実装例と実装の際の注意点をまとめてみました。

サンプルは下記です。

See the Pen Format Comma Number by k.chie (@blvrenlh-the-flexboxer) on CodePen.

maxlengthの設定

入力可能な桁数を制限するためmaxlengthを指定していても、メモ帳等で入力した値をコピー＆ペーストで入力すると、期待する以上の桁数が入力されてしまいます。

例えばここではmaxlength=11と指定していますが、カンマを考慮し9桁の数値入力を可能とする仕様にしたいです。
テキストボックスで直接入力する分にはmaxlength=11とするだけで期待する動作をするのですが、9桁を超える数値をコピー&ペーストで入力すると、数値11桁+カンマが入力できてしまいます。

コピー＆ペーストでの入力に対応するために、JS側でも下記のようにmaxlength以上の数値が入力されないよう制御を入れています。

  // maxlengthの設定がある場合の入力制御
  let maxlength = input.prop('maxlength');
  if (maxlength > 0) {
    value = value.slice(0, maxlength - (Math.floor(maxlength/4)));
  }

iOSでの入力に対応

カンマを入力するにあたって、カンマが増えても入力位置となるカーソルが移動しないように、最後にカーソル位置を調整する必要があります。(例: 123|4※カーソル位置は3 → 1,23|4 ※カーソル位置は4 )

その際、iOSでは半角数値の入力であってもカーソルが範囲で設定されるため、最終的なカーソル位置も範囲で調整するようにします。(例: |123|4 ※カーソル位置は0-3 → |1,23|4 ※カーソル位置は0-4)

  // カーソル位置を記憶
  const cursorPos = input.get(0).selectionEnd;
  const range = input.get(0).selectionEnd - input.get(0).selectionStart;

  // カーソル位置を調整
  const cursorOffset = newCommaCount - originalCommaCount;
  const newCursorPos = cursorPos + cursorOffset;
  const newRange = range > 0 ? range + cursorOffset : range;
  
  // カーソル位置をセット
  input.get(0).setSelectionRange(newCursorPos - newRange, newCursorPos);

他のOSでは半角数値入力の時にカーソル位置が範囲で設定されていないため、点として考えても問題にならないのですが、iOSでは最終的なカーソル位置を範囲で正く設定しないと入力がおかしくなってしまうため、注意が必要です。

まとめ

今回は入力した数値をリアルタイムにカンマ区切りにするテキストボックスの実装例について紹介させていただきました。
基本的にはサンプルをそのまま貼り付けていただければ動くと思います。
参考にしていただければ幸いです。