Что лучший способ состоит в том, чтобы эмулировать ввод HTML “maxlength” атрибут на текстовой области HTML?

Посмотрите на комментарии к этому сайту с количеством вниз. Я сделал это как это прежде, и это просто и эффективно. Переполнение стека хорошо использует цвет также.

Возможно, у Вас нет достаточного количества представителя для наблюдения поля комментария.

Это выполняет немного обратного отсчета, в то время как Вы вводите. В нем приближается к порогу, цвет изменяется от желтого до красного. Все использование JavaScript, и я принимаю keyup событие текстовой области.

Править: Как насчет того, чтобы сделать его с jQuery?

<script language="javascript" type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script language="javascript" type="text/javascript">
    $(document).ready( function () {
        setMaxLength();
        $("textarea.checkMax").bind("click mouseover keyup change", function(){checkMaxLength(this.id); } )
    });

    function setMaxLength() {
        $("textarea.checkMax").each(function(i){
            intMax = $(this).attr("maxlength");
            $(this).after("<div><span id='"+this.id+"Counter'>"+intMax+"</span> remaining</div>");
        });
    }

    function checkMaxLength(strID){
        intCount = $("#"+strID).val().length;
        intMax = $("#"+strID).attr("maxlength");
        strID = "#"+strID+"Counter";
        $(strID).text(parseInt(intMax) - parseInt(intCount));
        if (intCount < (intMax * .8)) {$(strID).css("color", "#006600"); } //Good
        if (intCount > (intMax * .8)) { $(strID).css("color", "#FF9933"); } //Warning at 80%
        if (intCount > (intMax)) { $(strID).text(0).css("color", "#990000"); } //Over
    }
</script>

И HTML

<textarea id="text" maxlength="250" class="checkMax"></textarea>

Я нашел хороший сценарий здесь, который мешает пользователю ввести больше текста после того, как длина входной строки превышает параметр MaxLen, это обладает бесспорным преимуществом больше всего пребывания из поверхности пользователя.

Моя проблема с тем сценарием состояла в том, что он также заблокировал клавиши навигации (стрелки, домой, конец) наряду с клавишей Backspace, и удалите, таким образом, я изменил его немного, иначе пользователь не мог удалить текст, который он ввел, если бы он достиг предела, установленного MaxLen (который был бы довольно весел :P).

JavaScript:

function imposeMaxLength(Event, Object, MaxLen)
{
        return (Object.value.length <= MaxLen)||(Event.keyCode == 8 ||Event.keyCode==46||(Event.keyCode>=35&&Event.keyCode<=40))
}

И HTML, который идет с ним:

<textarea onkeypress="return imposeMaxLength(event, this, 110);" rows="4" cols="50">

Пользователь может все еще обойти это ограничение путем вставки текста в текстовую область, но это может быть легко решено внутри imposeMaxLength.

Текстовая область PPK сценарий Maxlength доступна на его сайте. Ничто не полагает, просто старый JavaScript.

Можно легко использовать это в качестве начальной точки и внести изменения для размещения требования "уведомления" CSS.

Обратите внимание, что автор заявляет: "Цель моего сценария не состоит в том, чтобы осуществить максимальную длину, хотя это может легко быть изменено, чтобы сделать это. Однако я решил ограничить свой сценарий предоставлением вежливого напоминания, когда пользователь превышает максимальное количество символов".

ОБНОВЛЕНИЕ: из-за linkrot на приложенной статье, вот код, который когда-то существовал на той ссылке:

HTML:

<textarea id="text" name="text" maxlength="1250"></textarea>

JS:

function setMaxLength() {
    var x = document.getElementsByTagName('textarea');
    var counter = document.createElement('div');
    counter.className = 'counter';
    for (var i=0;i<x.length;i++) {
        if (x[i].getAttribute('maxlength')) {
            var counterClone = counter.cloneNode(true);
            counterClone.relatedElement = x[i];
            counterClone.innerHTML = '<span>0</span>/'+x[i].getAttribute('maxlength');
            x[i].parentNode.insertBefore(counterClone,x[i].nextSibling);
            x[i].relatedElement = counterClone.getElementsByTagName('span')[0];

            x[i].onkeyup = x[i].onchange = checkMaxLength;
            x[i].onkeyup();
        }
    }
}

function checkMaxLength() {
    var maxLength = this.getAttribute('maxlength');
    var currentLength = this.value.length;
    if (currentLength > maxLength)
        this.relatedElement.className = 'toomuch';
    else
        this.relatedElement.className = '';
    this.relatedElement.firstChild.nodeValue = currentLength;
    // not innerHTML
}

Просто звоните setMaxLength(); функция на загрузке.

Вот код JavaScript, который работает хорошо на меня:

onBlur="if (this.value.length > 500) { alert('The notes field only allows 500 characters. You have ' + this.value.length + ' characters.'); this.focus(); return false; }"

Используйте платформу JavaScript (Прототип, jQuery, и т.д.) так, чтобы у Вас была поддержка мероприятия перекрестного браузера. Запишите один лайнер на keyup препятствовать тому, чтобы пользователь ввел maxlength.

Примечание: Необходимо будет также проверить ту сторону сервера длины.

Я думаю, что следующее является столь "чистым", как это добирается. Сделайте обработчик событий в JavaScript, который берет keydown событие и поле текстовой области, как введено. Проверьте длину текста в поле в этом обработчике и возвратите false, если maxlength достигнут. (Конечно, сделайте любой стиль CSS, переключающийся прежде, чем возвратиться). Возвратите true иначе. Текстовая область должна быть похожей на это.

<textarea onkeydown="return checkMaxLength(event, this, 1000);"></textarea>