テキストボックスの数値を3桁ごとのカンマ区切りで表示する方法

ウェブページ上のテキストボックスの数値を操作する場面は多いですよね。とくに、ユーザーが金額や数量などの数値を入力する際に、見易くするために３桁ごとにカンマで区切るという処理は非常に一般的です。今回は、そんなカンマ区切りの処理方法を簡単に実装する方法を紹介します。

サンプルコードの仕組み

前提として、このサンプルコードは以下のidを持つテキストボックスの利用します。

<input id="txt" type="text" onkeydown="return event.keyCode !== 69" />

このサンプルコードの大まかな仕組みは、テキストボックスにフォーカスする（focus）ときとフォーカスが外れる（blur）ときで、テキストボックスのtype属性を切り替えることで、数値のカンマ区切りを実現しています。

1. ページ読み込み時: DOMContentLoadedイベントが発火すると、テキストボックスにフォーカスイベントとブラーイベントのリスナーを追加します。
2. フォーカス・イン時: テキストボックスにフォーカスが当たると、そのボックスのtypeをnumberに変更し、カンマを取り除きます。
3. フォーカス・アウト時: テキストボックスからフォーカスが外れると、typeをtextに戻し、数値を３桁ごとにカンマで区切って表示します。

サンプルコードとその解説

以下が、上記の仕組みを実装したサンプルコードです。

    const formatter = new Intl.NumberFormat("ja-JP");

    document.addEventListener("DOMContentLoaded", () => {
      const input = document.getElementById("txt")
      input.addEventListener("blur", (e) => setInputType(e, "text"))
      input.addEventListener("focus", (e) => setInputType(e, "number"))
    })

    function setInputType(e, inputType) {
      const elem = e.target
      switch (inputType) {
        case "number":
          let tmp = (elem.value + "").replace(/,/g, "")
          tmp = tmp ? Number(tmp) : ""
          elem.value = tmp
          elem.type = inputType
          break
        case "text":
          elem.type = inputType
          const val = elem.value ? 
            formatter.format(Number(elem.value)) :
            ""
          elem.value = val
          break
      }      
    }

このコードは、HTML内にID “txt” のテキストボックスがあることを前提としています。テキストボックスがフォーカスされたときやフォーカスが外れたときに、指定されたsetInputType関数が実行され、type属性とその値が適切に更新されます。

実際にこのコードを実装することで、ユーザーがテキストボックスに数値を入力する際に、見易く3桁ごとにカンマで区切られた形で表示されるようになります。これにより、ユーザー体験が向上するでしょう。