I have a Mui TextField component for currency input and I made it to show numeric keyboard only in Safari Browser.
But when the user tries to paste literal string into the field, I'd like to prevent it and make it sure that allows enter currency number inputs only.
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>
),
}}
/>
);
}
It shows numeric keyboard successfully in Safari browser, however, when you paste the literal string into the field, the field shows it.
How can I prevent user not to input or paste other characters than numbers(float value also)?
I tried with CurrencyInput and IMaskInput, but there's a problem in implementing startAdornment and endAdornment, so I don't prefer it.
Is there any solution to implement Currency Input with Adornment in Mui, working correctly in Safari Browser?
I don't think there's any way to prevent an actual paste, but you could use a useEffect on amount, and strip out all non-numeric characters:
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])
That being said, I probably wouldn't recommend doing it, I hate when websites mess with stuff I paste. Rather, I'd recommend having validation, and showing an error if it contains non-numeric allowing the user to fix it on their terms.