Каков наилучший способ эмуляции атрибута "maxlength" в HTML-тексте в текстовом поле HTML?

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

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

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

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

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

ОТВЕТЫ

Ответ 1

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

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

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

EDIT: Как насчет того, чтобы сделать это с помощью 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>

Ответ 2

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

Моя проблема с этим script состояла в том, что он также заблокировал навигационные клавиши (стрелки, home, end) вместе с 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">

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

Ответ 3

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

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

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

UPDATE: Из-за ссылки на прикрепленную статью, вот код, который когда-то существовал по этой ссылке:

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

Ответ 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; }"

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

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

Ответ 8

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

Здесь страница GitHub для простого подсчета:
https://github.com/aaronrussell/jquery-simply-countable/

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

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