全角入力できる数値入力フィールド

とあるWebシステムの開発において、下記要件をいただいた

• 通常、全角で入力していることが多い中、数値でデータを投入するのに全角モードを解除することが煩わしい
  全角モードのまま数値を入力できるようにしてほしい

ただ、Webの場合、数値を入力するフィールドはNumber属性にすることで、数値だけが入力できるようにし、Submit時にバリデーションすることで入力ミスを防ぐのが一般的かと、この開発当初もその考え方で実装が進んでいた

要件を受け、フィールドに関して調査を進めると、Text属性にし、全角モードにすると発生するイベントを検知し、全角で入力された数値を半角に変換することに取り組んでいる事例が見つかった
それならと、参考にしながら実装を進めていくことに

意外とイベントを受け、半角に変換することは事例の通りできるのですが、Reactのレンダリングと相まって、文字が消えたり、余分に入力されたように入力されたりと、意外と面倒

取り組んだシステムは、お客様のシステムなどで公開できないので、そんな苦闘を公開できるようにかたちにしたのが「全角入力できる数値入力フィールド」です
Geminiとともに活用例を含むデモサイトを作り上げ、公開してみました