not entering special characters on user input

Question

I have an input field where i am trying to block the special characters [dot, hiphen, space comma and e] so that user can't enter this special characters on both mobile and chrome.

function App() {
  const handleInput = (event) => {
    event.target.value = event.target.value.replace(/[e\.\- ]/g, "");
  };

  return ( <
    div className = "App" >
    <
    input type = "number"
    onInput = {
      handleInput
    }
    /> < /
    div >
  );
}

// Render it
ReactDOM.render( <
  App / > ,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Facing two issues on this, one is (999.) I am able to enter dot in between numbers, also when I enter some numbers and type hiphen then its clearing all the numbers (999-) => ().

How can I stop this two behaviour so that user can enter only 0-9 digits

Answer 1

Replacing the value when the user is typing makes for poor UX (the cursor jumps around). In your previous questions you were preventing those characters via keydown, which seems like the better approach. It may not work on all mobile browsers, but since you presumably want the numeric on-screen keyboard they provide for type="number", you may have to accept that and so some post-processing when you're going to use the value (rather than as they're typing it).

Here's an example of that pragmatic approach, preventing where you can, post-processing the value when using it in case you weren't able to prevent the invalid chars on some mobile devices. I've also made the input a controlled input since that makes it easier to use its value elsewhere in the component:

const {useState} = React;

const invalid = new Set(["e", ".", "-", " "]);
function App() {
    const [value, setValue] = useState("");
    
    const handleInput = (event) => {
        if (invalid.has(event.key)) {
            event.preventDefault();
        }
    };
    
    const useValue = (event) => {
        const prepped = value.replace(/[e.\- ]/g, "");
        console.log(`Using value "${value}"`);
    };
  
    return (
        <div className="App">
            <input
                type="number"
                onKeyDown={handleInput}
                onChange={e => setValue(e.target.value)}
                value={value}
            />
            <input type="button" value="Use Value" onClick={useValue} />
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById("root"));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>