Каков наилучший способ эмулировать HTML-атрибут ввода «maxlength» в текстовой области HTML?

Question

Ввод текста HTML имеет атрибут «maxlength», реализованный браузерами, который, если установлен, блокирует ввод пользователя после определенного количества символов.

HTML-элемент textarea, с другой стороны, не имеет этого атрибута. Моя цель - эмулировать поведение maxlength в текстовой области HTML. Требования:

• Как минимум, покажите (изменение CSS), что пользователь набрал слишком много символов.
• В идеале, блокируйте пользователя от ввода большего количества символов, как это происходит при вводе HTML.

Понятно, что проверка на стороне сервера должна снова проверить длину. Здесь я сосредоточусь только на клиентской части.

Мой вопрос: каков самый чистый способ эмуляции maxlength на стороне HTML в текстовой области на стороне клиента? В идеале, укажите на проверенный фрагмент JavaScript с открытым исходным кодом, который вы использовали.

Answer 1

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

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

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

РЕДАКТИРОВАТЬ: Как насчет того, чтобы сделать это с 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>

Answer 2

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

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

Answer 3

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

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

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

UPDATE: Из-за 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(); при загрузке.

Answer 4

Вот код 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; }"

Answer 5

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

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

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

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

Answer 6

Я полагаю, я могу попробовать, просто еще один способ сделать то же самое. Мне нравится такой способ, потому что вы можете обернуть его в некоторый код, чтобы проверить, работает ли он в 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;
    });
});

Answer 7

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

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

Answer 8

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

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