Какое лучшее решение JavaScript для ограничения длины текстовой области?

Question

Есть ли каноническое решение для ограничения количества символов, которые кто-то может ввести в текстовую область?

Конечно, у меня есть проверка на стороне сервера, но я хотел бы улучшить взаимодействие с пользователем, добавив код на стороне клиента для имитации опыта, который вы получаете с maxlength на входе [type = "text"], чтобы пользователи никогда не видели "ваш" ошибка ввода слишком длинная », если у них включен JavaScript.

Answer 1

Мои нетехнические $ 0,02

Сделайте то, что SO делает в своих полях комментариев, предоставьте обратную связь относительно оставшейся длины символов пользователя и дайте им возможность преодолеть максимум, но не отправлять> 300 символов. И вот почему:

Разрешение пользователям переходить через максимальное количество символов позволяет им завершить идею. Затем они могут вернуться и отредактировать эту идею. Нет ничего хуже, чем быть в конце предложения и быть неспособным завершить его. Предоставление обратной связи по длине символов не позволяет людям угадывать, какова их длина.

Answer 2

Я бы сделал это так:

$ ('#textarea-id').bind (
  'change input keyup keydown keypress mouseup mousedown cut copy paste',
  function () { return ($(this).val().length <= maxlength) }
)

Так много слов, чтобы быть полностью уверен: -)

Answer 3

Это сделает это ...

function textareaMaxLen(event) {
  var max = parseInt(this.attr("maxlength"), 10);
  if(this.value.length >= max)
    this.value = this.value.substr(0, max);
}

$("textarea").keyup(textareaMaxLen).blur(textareaMaxLen);

Answer 4

Присоединить событие onchange к текстовой области. Там вы можете проверить, является ли значение больше соответствующего или нет. Пример с jQuery:

$("#textarea-id").change(function (){
  var text = $(this).val();
  if( text.length > MAX ){
    return false;
  }
});

Answer 5

Я делал это в прошлом:

<textarea onkeyup="checkLength(this);"></textarea>

Затем реализуйте эту функцию:

function checkLength(control) {
            if (control.value.length > 5) {
                control.value = control.value.substr(0, 5);
            }
        }

Это довольно простой пример, фиксирующий длину до 5, но, надеюсь, дает вам идею!