I know how to make numbers input completely read only. However, how do I make it typing locked? Since I can type in it endless numbers even though the max value is 10 (and it works but only when using this up and down thing). If there's any code needed let me know, although I don't think so
You can use Javascript to check what the number's value is every time it changes, and if it's higher (or lower) than what you've specified, reset the value to the maximum or minium:
let number = document.getElementById("number");
let max = 10;
let min = 0;
number.addEventListener('input', () => {
if (number.value > max) {
number.value = max;
}
if (number.value < min) {
number.value = min;
}
});<input type="number" id="number" step="1" max="10" min="0">Still use the number type since that will do at least some of the checking for you but catch the user's input and if the number would become too big go back to the previous value (i.e. ignore the most recent typed digit just as you would an a-z character).
let limitedInputs = document.querySelectorAll("input.limitedNumber");
let prevValue = 0;
limitedInputs.forEach(input => {
input.addEventListener('input', () => {
if (input.value > input.max) {
input.value = prevValue;
} else if (input.value < input.min) {
input.value = input.min;
} else {
prevValue = input.value;
}
});
});<input type="number" max="10" min="0" class="limitedNumber">This snippet just sets the min value if the user's typed value goes too low but you may want to make the behavior different depending on the minimum value.