

Reactを用いて以下のようなコンポーネントを作成しました。  
文字が入力された際、それが数字であるなら半角化して反映します。  
全角入力をそのままにしてしまうと不具合が起きる（"111あああ２２２"としたとき２２２の部分が反映されないなど）ため、入力を検知するたびフォーカスを一瞬外して戻すことで強制的に一文字ずつ確定させています。

[code]

    const InptArea:FC=()=>{
      const [value,setValue]=useState("")
      export const numStringToNum = (text: string) => {
        const fullNum = [...'０１２３４５６７８９'];
        if (text.length === 0) {
          return '';
        } else if (text.match(/^[0123456789０１２３４５６７８９]+$/)) {
          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}/>
    }
    
[/code]

このコードで概ね問題なく動作するのですが、全角入力で複数の文字を同時に連打したときのみ、まれに異常が発生します。  
何らかの数字を入力した後、ASDFの4つのキーを同時に連打した際の `console.log({value, newval});` 部分の出力例です。

[code]

    {value: "22313213", newval: "22313213あ"}
    {value: "22313213", newval: "22313213あｄ"}
    {value: "22313213", newval: "223132"}
    {value: "223132", newval: "223132あｄｓ"}
    {value: "223132", newval: "223132あ"}
    {value: "223132", newval: "223132あｄ"}
    {value: "223132", newval: "223132あｄｆ"}
    {value: "223132", newval: "223132あｄｆｓ"}
    {value: "223132", newval: "223132ｆ"}
    {value: "223132", newval: "223132ふぁ"}
    {value: "223132", newval: "2231"}
    {value: "2231", newval: "2231ふぁｓ"}
    {value: "2231", newval: "2231ｄ"}
    
[/code]

このように稀に `e.target.value`
の値に数字だけ渡されてしまい、(223132の行と2231の行)入力文字種のチェックをすり抜けて反映されてしまいます。  
「fa→ふぁ」などひらがなが生成されたときの処理の影響かとも思いましたが例外もあり、条件が判然としません。  
実用上は問題ないのですが、なぜこのような現象が起こるのかが知りたいです。  
調べ方もわからず困っています。よろしくお願いします。


CC BY-SA 4.0
2021-05-21T02:54:17.573
75990
2021-05-21T08:49:08.970
2021-05-21T08:49:08.970
45437
45437
question
javascript html reactjs typescript
javascriptで半角入力を強制したinput要素に全角入力を行った際に入力済みの文字が消える現象