|
Сообщение от Brick
|
|
мне надо чтоб в поле input ввел 4 цифры и всё
|
Они прекрасно вводятся
|
Сообщение от Brick
|
|
с number, ни как?
|
вообще то для этого и предназначен
|
Сообщение от Brick
|
|
в number - maxlength="4"- не работает
|
Да, оно там не работает, поскольку не понятно, знак минуса тоже учитывать или нет. А если десятичная точка, то её тоже учитывать? Как видите, при использовании input[type="number"] не понятно, что должен делать minlength/maxlength... следует учитывать все знаки числа, или же только целую часть по модулю, или же...
первый вариант решения заключается в использовании атрибутов min, max и step.
<form>
<input
type="number"
min="0"
max="9999"
step="1"
placeholder="Введите 4-значное число..."
required
>
</form>
<style>
input[type="number"] {
font-size: 300%;
display: block;
width: 100%;
padding: .1em;
box-sizing: border-box;
border: 0 solid transparent;
border-bottom-width: 2px;
outline: 0;
}
input[type="number"]:focus {
border-color: currentColor;
}
input[type="number"]:invalid {
background-color: #fee;
color: red;
}
input[type="number"]:valid {
background-color: #efe;
color: green;
}
</style>
второй вариант заключается в собственном понимании атрибутов minlength и maxlength. Обратите внимание, что вы можете регулировать количество знаков в натуральном числе(возможно наличие нулей в старшем разряде)
<form>
<input
type="number"
step="1"
minlength="4"
maxlength="4"
placeholder="Введите 4-значное число..."
required
>
</form>
<script>
addEventListener("input", ({ target }) => {
if(!target.matches("input[type='number']")) return;
if(Number.isNaN(target.minLength) || Number.isNaN(target.maxLength)) return;
target.value = target.value.replace(/\D/g, "").slice(0, target.maxLength);
target.setCustomValidity(
target.value.match(
new RegExp(`^\\d{${target.minLength},${target.maxLength}}$`)
) ?
'' : 'Введите 4-значное число'
);
});
</script>
<style>
input[type="number"] {
font-size: 300%;
display: block;
width: 100%;
padding: .1em;
box-sizing: border-box;
border: 0 solid transparent;
border-bottom-width: 2px;
outline: 0;
}
input[type="number"]:focus {
border-color: currentColor;
}
input[type="number"]:invalid {
background-color: #fee;
color: red;
}
input[type="number"]:valid {
background-color: #efe;
color: green;
}
</style>
