Атрибут maxlength
для входных данных и текстовых областей отлично работает для пользовательского ввода, но когда я изменяю значение с помощью Javascript или задаю его с помощью value="..."
и отправляю форму впоследствии, проверка не применяется:
<form action="#">
<input type="text" maxlength="5" value="Longer than 5 chars">
<input type="submit">
</form>
Почему это не дает сбоя?
Сравните с вводом чисел, где форма не соответствует ожидаемой:
<form action="#">
<input type="number" max="4" value="8">
<input type="submit">
</form>
Согласно MDN ,
[maxlength] Проверка ограничения применяется только тогда, когда значение изменяется пользователем .
Но почему? И можно ли это решить без Javascript? Кажется излишним проверять максимальную длину в двух разных местах, сначала в HTML, а затем в Javascript.
Для каких атрибутов применяется эта проблема проверки? maxlength
, minlength
и другие ...? Количество входов? Дата ввода? Есть ли список тех, так что я знаю, какие из них мне нужно проверить вручную?
Редактировать : Вот более конкретный c вариант использования:
function addChar() {
document.querySelector('input[type="text"]').value += 'a';
}
<form action="#">
<input type="text" maxlength="5" value="a">
<input type="submit">
</form>
<button onclick="addChar()">Add another character</button>
Пользователь может пару раз нажать кнопку «Добавить другого персонажа» и затем отправить форму. Это не подведет. Если я хочу запретить пользователю добавлять слишком много символов, мне нужно добавить пользовательскую проверку Javascript:
function addChar() {
var input = document.querySelector('input[type="text"]');
if(input.value.length > input.maxLength) {
return;
}
input.value += 'a';
}
<form action="#">
<input type="text" maxlength="5" value="a">
<input type="submit">
</form>
<button onclick="addChar()">Add another character</button>
А теперь в коде есть проверка для maxlength
два раза. Это не кажется правильным и противоречивым по сравнению с другими ограничениями допустимости (например, ввод числа max
выше)