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

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

Ответы

Ответ 1

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

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

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

Это работает, потому что булево выражение сравнивает длину поля до того, как новый символ будет добавлен к максимальной длине (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, чтобы проверить длину, и обрабатывать его, как вы хотите (обрезать значение молча, уведомить пользователя и т.д.). К сожалению, это не ломает ошибку, поскольку это происходит, только когда пользователь пытается покинуть поле, что не совсем так же дружелюбно.

Источник

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

http://cf-bill.blogspot.com/2005/05/textarea-maxlength-revisited.html