Tengo un campo de entrada en el que intento bloquear los caracteres especiales [punto, hiphen, espacio, coma y e] para que el usuario no pueda ingresar estos caracteres especiales tanto en el dispositivo móvil como en 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>Enfrentando dos problemas en esto, uno es (999). Puedo ingresar un punto entre números, también cuando ingreso algunos números y escribo hiphen, entonces borra todos los números (999-) => ().
¿Cómo puedo detener estos dos comportamientos para que el usuario pueda ingresar solo de 0 a 9 dígitos?
Reemplazar el valor cuando el usuario está escribiendo genera una experiencia de usuario deficiente (el cursor salta). En sus preguntas anteriores, estaba evitando esos caracteres a través de keydown , lo que parece ser el mejor enfoque. Es posible que no funcione en todos los navegadores móviles, pero dado que presumiblemente desea el teclado numérico en pantalla que proporcionan para type="number" , es posible que deba aceptar eso y, por lo tanto, algún procesamiento posterior cuando vaya a usar el valor. (en lugar de como lo están escribiendo).
Aquí hay un ejemplo de ese enfoque pragmático, evitando donde puede, procesando posteriormente el valor cuando lo usa en caso de que no haya podido evitar los caracteres no válidos en algunos dispositivos móviles. También convertí la entrada en una entrada controlada, ya que eso facilita el uso de su valor en otras partes del componente:
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>