Hey guys trying that I can just enter numbers with my keyboard into an html number field from 1-100.
I took the function from here HTML number input min and max not working properly and it worked properly for numbers between 1-100.
But I can still enter letters and I don't know how to solve it. I tried adding
if (typeof (parseInt(el.value)) != 'number') {
el.value = el.min;
}
But it is not working. Here is my whole code:
const enforceMinMax = (el) => {
if (el.value != "") {
if (parseInt(el.value) < parseInt(el.min)) {
el.value = el.min;
}
if (parseInt(el.value) > parseInt(el.max)) {
el.value = el.max;
}
if (typeof (parseInt(el.value)) != 'number') {
el.value = el.min;
}
}
}<input type="number" id="quantity" name="quantity" min="1" max="100" step="1" onkeyup=enforceMinMax(this) ><br /><br />How can I stop entering letters with my keyboard in a html number field?
You could apply this same logic to every numeric input that has a min & max attribute like so:
// find all numeric inputs that have both min & max attributes
// and apply the event handler to each.
document.querySelectorAll('input[type="number"][min][max]').forEach(
input => input.addEventListener('keyup', function(e) {
// if the value is numeric proceed - test the numeric value of the input against the min/max attribute values.
if( !isNaN( Number( this.value ) ) ) {
if( Number( this.value ) > this.max )this.value=this.max;
if( Number( this.value ) < this.min )this.value=this.min;
return true;
}
e.preventDefault();
return false;
})
);<input type="number" name="quantity" min="1" max="100" step="1" />You can compare keyCode and return false if key is not a number, then on key up you can validate min and max value, accordingly modify value of input
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<script>
function handleKeyDown(e) {
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
e.preventDefault();
return false;
}
}
function handleKeyUp(e) {
const v = e?.target?.value || 0;
if (parseInt(v) === NaN || parseInt(v) < 1) {
e.target.value = 1;
} else if (parseInt(v) > 100) {
e.target.value = 100;
}
}
</script>
</head>
<body>
<input
type="number"
min="1"
max="100"
onkeydown="handleKeyDown(event)"
onkeyup="handleKeyUp(event)"
/>
</body>
</html>