I found this neat solution to my negative numbers problem https://stackoverflow.com/a/46039201
Here it is below
onInput={(e)=>{
e.target.value = !!e.target.value && Math.abs(e.target.value) >= 0 ? Math.abs(e.target.value) : null;
}}
But I have a bit of an issue it only allows numbers and I do require decimal places because these inputs are for currencies such as activation fee, billing amount and such. Otherwise than that the above solution works like a charm
Does anyone here have a similar solution or something that can be added to this to make it accept decimal places ?
Ive tried looking into some others but then the user can type in -1111 and it saves it even if you add min={0} to the input field
It wasn't easy for me to find a solution. In the end, what worked was a combination of a pattern and a custom attribute to store the previous value:
const restricted = document.querySelector('#restricted')
restricted.addEventListener('keyup', event => {
const value = event.target.value;
if (!/^[0-9]+\.?[0-9]?$/.test(value) && value !== '') {
event.target.value = event.target.getAttribute('data-value');
} else {
event.target.setAttribute('data-value', value);
}
});<input id="restricted">Make use of step
<input type="number" min="0" step="0.1" oninput="this.value = Math.abs(this.value)">