Для элементов input доступно такое свойство, как maxlength, которое позволяет ограничить количество вводимых в эти поля символов. Однако для textarea такой атрибут не существует, и поэтому для ограничения ввода можно использовать JavaScript |
Чтобы указать максимальное количество символов для ввода, добавим к полю атрибут maxlength:
<textarea rows="5" cols="45" maxlength="100" onkeypress="return isNotMax(this)"> </textarea>
Теперь создадим функцию, которая будет проверять количество введенных символов и при необходимости блокировать ввод:
function isNotMax(oTextArea) { return oTextArea.value.length <= oTextArea.getAttribute('maxlength'); }
Функция возвращает true или false в обработчик событий onkeypress. Поэтому, если длина строки превысит число, указанное в maxlength, то функция вернет false, тем самым предотвратив действие по-умолчанию (ввод символа).
Вышеприведенный код имеет один существенный недостаток - как только количество символов в поле достигнет предела, блокироваться будут все символы, в том числе и Enter и Backspace и т.д. Следовательно исправить введенный текст будет невозможно. Для того, чтобы исправить это, добавим код который будет определять нажатую клавишу:
function isNotMax(e){ e = e || window.event; var target = e.target || e.srcElement; var code=e.keyCode?e.keyCode:(e.which?e.which:e.charCode) switch (code){ case 13: case 8: case 9: case 46: case 37: case 38: case 39: case 40: return true; } return target.value.length <= target.getAttribute('maxlength'); }
Эта функция принимает один аттрибут - событие, затем определяет нажатую клавишу, и если это Enter, Backspace, Delete или стрелки, то возвращается true, если нет, то выполняется обычная проверка. Тэг textarea в этом случае будет выглядеть так:
<textarea rows="5" cols="45" maxlength="100" onkeypress="return isNotMax(event)"> </textarea>
JavaScript защита Пример ограничения количества введённых символов в textarea
|