Prevent non-numeric input

[viveleroi]

Is there a way to prevent non-numeric input entirely, rather than stripping it out?

For example I can type "foo" into the input, and it's displayed as a value, but then stripped when I blur the field. I need to prevent those characters from being typed in at all. I tried pattern/inputMode just in case but neither do what I need.

Is this possible?

[yoyo837]

Is it possible to do this in controlled mode？

[viveleroi]

Are you asking me? I'm not sure what you mean. I guess I need to intercept the onChange or something and prevent anything but numbers/decimals?

[viveleroi]

Just in case, the onChange isn't called until a parseable number is present in the field. So if I typed "hhh" the onChange isn't fired until I type an actual number. So I have no power to remove characters as the user types. This feature would need to be handled in the library and should be opt-in.

In BlueprintJS the prop is called allowNumericCharactersOnly

[nathanredblur]

I need this too.
the problem is that in Safari, you can type text in numeric input boxes.
I try everything but I can not find a defenitve solution.

first thing is to enable type="number" that prevent letters in all mayor browsers but not for safari.
to fix that, I need it to create something like this:

const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {
    if (
        /[0-9]/.test(event.key) ||
        event.key === 'Backspace' ||
        event.key === 'Delete' ||
        event.key === 'ArrowLeft' ||
        event.key === 'ArrowRight' ||
        event.key === 'ArrowUp' ||
        event.key === 'ArrowDown' ||
        event.key === 'Home' ||
        event.key === 'End' ||
        event.key === 'Tab' ||
        event.key === 'Enter' ||
        event.key === 'Escape'
    ) {
        return;
    }
    event.preventDefault();
};

<InputNumber
                            type="number"
                            onKeyDown={handleKeyDown}
                        />

but the problem with this is that not handle edge cases like copy and paste a number.

and this point, the solution it's getting too complex.