Максимальная длина для HTML <textarea>

Question

Как ограничить максимальное количество символов, которое можно ввести в HTML <textarea>? Я ищу кросс-браузерное решение.

Answer 1

Тег TEXTAREA не имеет атрибута MAXLENGTH, как INPUT тег, по крайней мере, не в большинстве стандартных браузеров. Очень простой и эффективный способ ограничить количество символов, которые можно ввести в тег TEXTAREA:

<textarea onKeyPress="return ( this.value.length < 50 );"></textarea>

Примечание: onKeyPress, предотвращает любое нажатие кнопки, любую кнопку , включая клавишу возврата.

Это работает, потому что логическое выражение сравнивает длину поля перед добавлением нового символа к максимальной длине, которую вы хотите (50 в этом примере, используйте свою собственную здесь), и возвращает true, если есть место для еще одного, false, если нет. Возвращение false из большинства событий отменяет действие по умолчанию. Так что, если текущая длина уже 50 (или более), обработчик возвращает false, действие KeyPress отменено, а символ не добавлен.

Одна ложка дегтя - это возможность вставить в TEXTAREA, который не вызывает событие KeyPress, обходя эту проверку. Internet Explorer 5+ содержит событие onPaste, обработчик которого может содержать проверять. Тем не менее, обратите внимание, что вы также должны учитывать, сколько персонажи ждут в буфере обмена, чтобы узнать, будет ли сумма принять вас за предел или нет. К счастью, IE также содержит буфер обмена объект из окна объекта. 1 Таким образом:

<textarea onKeyPress="return ( this.value.length < 50 );"
onPaste="return (( this.value.length +
window.clipboardData.getData('Text').length) < 50 );"></textarea>

Опять же, событие onPaste и объект clipboardData предназначены только для IE 5+. Для кросс-браузерного решения вам просто нужно использовать обработчик OnChange или OnBlur, чтобы проверить длину и обработать ее так, как вы хотите (обрезать значение молча, уведомить пользователя и т. Д.). К сожалению, эта ошибка не улавливается, поскольку она происходит, только когда пользователь пытается покинуть поле, что не совсем так.

Источник

Кроме того, здесь есть еще один способ, включая готовый скрипт, который вы можете включить на своей странице:

http://cf -bill.blogspot.com / 2005/05 / TextArea-MaxLength-revisited.html

Answer 2

HTML5 теперь допускает атрибут maxlength для <textarea>.

Поддерживается всеми браузерами, кроме IE <= 9 и iOS Safari 8.4. См. <a href="http://caniuse.com/#feat=maxlength" rel="nofollow"> таблицу поддержки на caniuse.com .

Answer 3

$(function(){  
  $("#id").keypress(function() {  
    var maxlen = 100;
if ($(this).val().length > maxlen) {  
  return false;
}  
})
});  

Ссылка Установить максимальную длину в Html Textarea