Tengo un componente Mui TextField para la entrada de moneda y lo hice para mostrar el teclado numérico solo en el navegador Safari.
Pero cuando el usuario intenta pegar una cadena literal en el campo, me gustaría evitarlo y asegurarme de que solo permite ingresar entradas de números de moneda.
import { TextField } from '@mui/material'; export default function CustomCurrencyTestScreen(props){ const [amount, setAmount] = useState(''); const handleChange = e => { setAmount(e.target.value); } const handleBlur = e => { //some validation functionalities } return ( <TextField size="small" id="amount" name="amount" onChange={handleChange} onBlur={handleBlur} inputProps={{ style:{ fontSize:14, } inputMode:'numeric', }} InputProps={{ startAdornment: ( <InputAdornment position="start"> $ </InputAdornment> ), endAdornment:( <InputAdornment position='end'> { Boolean(amount) && <CancelRounded size="small" color="grey" sx={{padding:0}} onClick={()=> setAmount('')}/> } </InputAdornment> ), }} /> ); }Muestra el teclado numérico con éxito en el navegador Safari, sin embargo, cuando pega la cadena literal en el campo, el campo lo muestra.
¿Cómo puedo evitar que el usuario ingrese o pegue otros caracteres que no sean números (también valor flotante)?
Probé con CurrencyInput e IMaskInput, pero hay un problema al implementar startAdornment y endAdornment, así que no lo prefiero.
¿Hay alguna solución para implementar la entrada de moneda con adorno en Mui, que funcione correctamente en el navegador Safari?
No creo que haya ninguna forma de evitar un pegado real, pero podría usar un useEffect de uso en la cantidad y eliminar todos los caracteres no numéricos:
useEffect(() => { function hasNonNumeric(s) { // return true if has non numeric } function stripNonNumeric(s) { // logic here that returns a string with non-numeric chars stripped } if(hasNonNumeric(amount)) { setAmount(stripNonNumeric(amount)) } }, [amount])Dicho esto, probablemente no recomendaría hacerlo, odio cuando los sitios web se meten con cosas que pego. Más bien, recomendaría tener validación y mostrar un error si contiene elementos no numéricos que permitan al usuario corregirlo en sus términos.