Reactを用いて以下のようなコンポーネントを作成しました。
文字が入力された際、それが数字であるなら半角化して反映します。
全角入力をそのままにしてしまうと不具合が起きる("111あああ222"としたとき222の部分が反映されないなど)ため、入力を検知するたびフォーカスを一瞬外して戻すことで強制的に一文字ずつ確定させています。
const InptArea:FC=()=>{
const [value,setValue]=useState("")
export const numStringToNum = (text: string) => {
const fullNum = [...'0123456789'];
if (text.length === 0) {
return '';
} else if (text.match(/^[01234567890123456789]+$/)) {
return fullNum.reduce((prev, num, index) => {
const reg = new RegExp(num, 'g');
return prev.replace(reg, index.toString());
}, text);
} else {
return false;
}
};
const input= {
type: 'text',
value,
onKeyDown: (e: KeyboardEvent<HTMLInputElement>) => {
e.currentTarget.blur();
e.currentTarget.focus();
},
onChange: (e: ChangeEvent<HTMLInputElement>) => {
const newval = e.target.value;
const val = numStringToNum(newval);
console.log({value, newval});
if (val !== false) setVal(val);
},
}
return <input {...input}/>
}
このコードで概ね問題なく動作するのですが、全角入力で複数の文字を同時に連打したときのみ、まれに異常が発生します。
何らかの数字を入力した後、ASDFの4つのキーを同時に連打した際の console.log({value, newval});
部分の出力例です。
{value: "22313213", newval: "22313213あ"}
{value: "22313213", newval: "22313213あd"}
{value: "22313213", newval: "223132"}
{value: "223132", newval: "223132あds"}
{value: "223132", newval: "223132あ"}
{value: "223132", newval: "223132あd"}
{value: "223132", newval: "223132あdf"}
{value: "223132", newval: "223132あdfs"}
{value: "223132", newval: "223132f"}
{value: "223132", newval: "223132ふぁ"}
{value: "223132", newval: "2231"}
{value: "2231", newval: "2231ふぁs"}
{value: "2231", newval: "2231d"}
このように稀に e.target.value
の値に数字だけ渡されてしまい、(223132の行と2231の行)入力文字種のチェックをすり抜けて反映されてしまいます。
「fa→ふぁ」などひらがなが生成されたときの処理の影響かとも思いましたが例外もあり、条件が判然としません。
実用上は問題ないのですが、なぜこのような現象が起こるのかが知りたいです。
調べ方もわからず困っています。よろしくお願いします。