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

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

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

Пока вы печатаете, идет небольшой обратный отсчет. При приближении к порогу цвет меняется с желтого на красный. Все с использованием 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 и delete, поэтому я немного изменил его, иначе пользователь не мог удалить введенный им текст, если он достиг предела, установленного 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">

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

Скрипт PPK Textarea Maxlength доступен на его сайте. Ничего особенного, просто старый добрый JavaScript.

Вы можете легко использовать это как отправную точку и вносить изменения в соответствии с вашими требованиями CSS к «уведомлению».

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

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

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

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

Используйте платформу JavaScript (Prototype, jQuery и т. д.), чтобы у вас была поддержка кроссбраузерных событий. Напишите однострочник на keyup, чтобы пользователь не вводил максимальную длину.

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

Я полагаю, что могу попробовать, просто еще один способ сделать то же самое. Мне нравится этот способ сделать это, потому что вы можете обернуть это в некоторый код, чтобы проверить, работает ли вы в IE, поскольку maxlength действительно работает с текстовыми областями в браузерах webkit и gecko. Это зависит от свойства maxlength, установленного для элемента textarea в html. Также потому, что это действительно работает, поскольку свойство maxlength работает в браузере по умолчанию, не позволяя пользователю добавлять больше, чем указанные символы.

$(document).ready(function () {


$('textarea').on('keyup', function () {
    // Store the maxlength and value of the field.
    if (!maxlength) {
        var maxlength = $(this).attr('maxlength');
    }
    var val = $(this).val();
    var vallength = val.length;

    // alert
    if (vallength >= maxlength) {


        alert('Please limit your response to ' + maxlength + ' characters');
        $(this).blur();
    }


    // Trim the field if it has content over the maxlength.
    if (vallength > maxlength) {
        $(this).val(val.slice(0, maxlength));
    }
});

//remove maxlength on blur so that we can reset it later.
$('textarea').on('blur', function () {
        delete maxlength;
    });
});

Вот плагин jQuery, который я использую, под названием «Simply Countable», который позволяет добавлять счетчик в текстовое поле. Одна из функций заключается в том, что он позволяет вам установить максимальное количество символов, разрешенных в поле, и обеспечивает его соблюдение, чтобы пользователь не мог превысить этот лимит.

Вот страница GitHub для Simply Countable:
https://github.com/aaronrussell/jquery-simply-countable/

Вы бы использовали это так ...

$('#my_textarea').simplyCountable({
    counter: '#counter',
    maxCount: 140,
    strictMax: true
});