0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

<input>のonChangeで半角数字以外の入力を弾く

Posted at
const [inputNum, setInputNum] = useState("");

const REGEX_NUMBER = /^[0-9]*$/g;

export const onChangeFilterNumber = (event, setterFunction) => {
    let input = event.target.value;
    if (input.match(REGEX_NUMBER)) {
        setterFunction(input);
        return true;
    } else {
        return false;
    }
};

...
...

{/* type="number"にすると"e","E"が入力できてしまう挙動になりハマった */}
<input
 type="text"
 value={inputNum}
 onChange={changeEvent => onChangeFilterNumber(changeEvent, setInputNum)}
 placeholder="半角数字で入力してください"
/>
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?