Атрибут maxlength тега <textarea> — ліміт символів
Атрибут maxlength (HTML тега <textarea>) вказує максимальну кількість символів, яке може міститися в текстовій області (при досягненні заданого числа символів подальше введення неможливе).
Загальний опис
автор: NagarD
Синтаксис
<textarea maxlength="number">Атрибут maxlength може отримувати єдине значення:
-
number -
Максимальна кількість символів у текстовому полі.
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 4 | 4 | 5 | ≤12.1 | 12 | 10 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 4.2 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута maxlength теґа <textarea>
HTML
<p>У цьому прикладі, Ви можете змінювати значення для властивості maxlength в межах від 0 до 100 переміщаючи повзунок.</p>
<p id="text"></p>
<input type="range" id="range" min="0" max="100" step="1" name="range">
<input type="button" value="Встановити maxlength" onclick="f()">
<hr>
<br>
<div class="block1" >
<p> З використанням атрибута <code> maxlength </code> </p>
<textarea id="password" type="password" maxlength="10"></textarea>
</div>
<div class="block2">
<p> Без використання атрибута <code> maxlength </code></p>
<textarea type="password" size="20"></textarea>
</div>CSS
*{
text-align:center;
}
.block1{
float:left;
width:45%;
}JS
function f() {
var maxlength = document.getElementById("range").value;
var password = document.getElementById("password");
password.setAttribute("maxlength", maxlength);
text.innerHTML = "Поточна кількість символів:" + maxlength;
}
//# sourceURL=pen.jsНайпростіший приклад використання HTML атрибута maxlength теґа <textarea>
<form>
<p>З використанням атрибута maxlength</p>
<p>Напишіть повідомлення: (максимальна довжина повідомлення 20 символів)</p>
<p><textarea autofocus maxlength="20"></textarea></p>
<p><input type="submit" value="Надіслати"></p>
</form>
<br><br>
<form>
<p>Без використання атрибута maxlength</p>
<p>Напишіть повідомлення:</p>
<p><textarea></textarea></p>
<p><input type="submit" value="Надіслати"></p>
</form>Чотири поля з тим самим maxlength, які поводяться по-різному: у перше просто не вдасться набрати більше за ліміт; у другому текст із розмітки довший за ліміт — і лишається цілим; у третє вміститься лише два емодзі замість трьох; четверте має ще й required, і тільки він фарбує рамку червоним — сам maxlength не робить поле недійсним ніколи.
HTML
<p class="lbl"><label for="m1">maxlength="10" — наберіть довше й побачите стелю</label></p>
<textarea id="m1" maxlength="10" rows="2" cols="40"></textarea>
<p class="lbl"><label for="m2">maxlength="10", але в розмітці вже 34 символи</label></p>
<textarea id="m2" maxlength="10" rows="2" cols="40">Цей текст довший за дозволену межу</textarea>
<p class="why">Ліміт до нього не застосовується: він прийшов із розмітки, а не з клавіатури.</p>
<p class="lbl"><label for="m3">maxlength="5" — спробуйте набрати три емодзі</label></p>
<textarea id="m3" maxlength="5" rows="2" cols="40"></textarea>
<p class="why">Кожен смайлик важить дві одиниці UTF-16, тож третій уже не влазить.</p>
<p class="lbl"><label for="m4">maxlength="10" і required — рамка реагує лише на порожнечу</label></p>
<textarea id="m4" maxlength="10" rows="2" cols="40" required></textarea>
<p class="why">Наберіть будь-що — рамка позеленіє. Перевищити ліміт і зробити поле
червоним не вийде: зайві символи туди просто не потрапляють.</p>CSS
.lbl {
margin: 16px 0 4px;
}
label {
font-weight: 600;
}
textarea {
font: 15px/1.4 system-ui, sans-serif;
padding: 6px;
border: 2px solid #b9c6d8;
border-radius: 4px;
}
textarea:required:invalid {
border-color: #d64545;
background: #fff4f4;
}
textarea:required:valid {
border-color: #3a9a4f;
background: #f3fbf4;
}
.why {
margin: 4px 0 0;
max-width: 460px;
color: #5a6472;
font-size: .9em;
}Різниця між HTML 4.01 та HTML5
Атрибут maxlength для тегу textarea з’явився тільки у HTML5.
Коментарі
Коментарів ще немає — будьте першим!