Skip to main content
タイトルを編集
リンク

javascriptで半角入力を強制したinput要素に全角入力を行った際に入力済み不審な挙動文字が消える現象

本文に 21 文字追加
ソース リンク
cubick
  • 2.1万
  • 5
  • 27
  • 64

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

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

このコードで概ね問題なく動作するのですが、全角入力で複数の文字を同時に連打したときのみ、まれに異常が発生します。
何らかの数字を入力した後、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→ふぁ」などひらがなが生成されたときの処理の影響かとも思いましたが例外もあり、条件が判然としません。
実用上は問題ないのですが、なぜこのような現象が起こるのかが知りたいです。
調べ方もわからず困っています。よろしくお願いします。

このコードで概ね問題なく動作するのですが、全角入力で複数の文字を同時に連打したときのみ、まれに異常が発生します。
何らかの数字を入力した後、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→ふぁ」などひらがなが生成されたときの処理の影響かとも思いましたが例外もあり、条件が判然としません。
実用上は問題ないのですが、なぜこのような現象が起こるのかが知りたいです。
調べ方もわからず困っています。よろしくお願いします。

ソース リンク

javascriptで半角入力を強制したinput要素に全角入力を行った際の不審な挙動

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→ふぁ」などひらがなが生成されたときの処理の影響かとも思いましたが例外もあり、条件が判然としません。
実用上は問題ないのですが、なぜこのような現象が起こるのかが知りたいです。
調べ方もわからず困っています。よろしくお願いします。