Как наложить maxlength на textArea в HTML с помощью JavaScript

116

Я хотел бы иметь некоторые функции, с помощью которых, если я напишу

<textarea maxlength="50"></textarea>
<textarea maxlength="150"></textarea>
<textarea maxlength="250"></textarea>

он автоматически установит максимальную длину для textArea. По возможности не предоставляйте решение в jQuery.

Примечание: это можно сделать, если я сделаю что-то вроде этого:

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

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

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

Но дело в том, что я не хочу писать onKeyPress и onKeyUp каждый раз, когда объявляю textArea.

javascript html textarea Ракеш Жуял
источник

4

maxlenth для текстовых полей находится в формате html5. Сейчас он работает в Chrome, но не в Firefox.

Дэйв

113

window.onload = function() { 
  var txts = document.getElementsByTagName('TEXTAREA'); 

  for(var i = 0, l = txts.length; i < l; i++) {
    if(/^[0-9]+$/.test(txts[i].getAttribute("maxlength"))) { 
      var func = function() { 
        var len = parseInt(this.getAttribute("maxlength"), 10); 

        if(this.value.length > len) { 
          alert('Maximum length exceeded: ' + len); 
          this.value = this.value.substr(0, len); 
          return false; 
        } 
      }

      txts[i].onkeyup = func;
      txts[i].onblur = func;
    } 
  };

}

Джош Стодола
источник

3

Джош, похоже, это сработает, но не могли бы вы объяснить, что будет делать эта штука --- if (/ ^ [0-9] + $ /. Test (txts [i] .getAttribute ("maxlength"))) {- -

Rakesh Juyal

2

Думаю, я помню, в чем заключается сделка: либо FF, либо IE (я думаю, что FF) возвращает другую строку, когда Javascript проверяет атрибут «значение», чем то, что он отправляет обратно на сервер при отправке формы! Это как-то связано с тем, как при жестком переносе строк вставляется / не вставляется символ возврата каретки. Это легко понять с помощью отладочного кода на стороне клиента и сервера.

Pointy

7

Я изменил порядок предупреждения и усечения значения - в исходном порядке onkeyup будет предупреждать, в результате чего элемент управления теряет фокус и запускается onblur, поскольку поле еще не было усечено.

GalacticCowboy

1

@JoshStodola - onblurне будет обрабатывать вставку, пока пользователь не выйдет за пределы текстового поля. onkeyupне будет обрабатывать вставку, если это делается через контекстное меню или меню браузера. Этот подход работает, если вам не нужно скрининг для вставки. См. Этот ответ для подхода, основанного на таймере stackoverflow.com/a/10390626/1026459

Travis J,

3

@JoshStodola - Конечно, нельзя. Меня как пользователя действительно раздражало бы, если бы я вставил целую часть чего-либо в текстовое поле, щелкнул «Отправить» и увидел, что только небольшая часть прошла без какого-либо ответа.

Travis J

80

Я знаю, что вы хотите избежать jQuery, но поскольку для решения требуется JavaScript, это решение (с использованием jQuery 1.4) является наиболее продуманным и надежным.

Вдохновленный, но улучшенный ответ Даны Вудман:

Отличия от этого ответа: Упрощенный и более общий, с использованием jQuery.live, а также без установки val, если длина в порядке (приводит к рабочим клавишам со стрелками в IE и заметному ускорению в IE):

// Get all textareas that have a "maxlength" property. Now, and when later adding HTML using jQuery-scripting:
$('textarea[maxlength]').live('keyup blur', function() {
    // Store the maxlength and value of the field.
    var maxlength = $(this).attr('maxlength');
    var val = $(this).val();

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

РЕДАКТИРОВАТЬ: обновленная версия для jQuery 1.7+ , используя onвместоlive

// Get all textareas that have a "maxlength" property. Now, and when later adding HTML using jQuery-scripting:
$('textarea[maxlength]').on('keyup blur', function() {
    // Store the maxlength and value of the field.
    var maxlength = $(this).attr('maxlength');
    var val = $(this).val();

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

Эйрик В
источник

1

Симпатичный Эйрик, нравится пользоваться живьем (забыл об этом!).

Дана Вудман

5

Я обнаружил ошибки в live (), и с тех пор jQuery устарел. Вместо этого используйте on (). Если вам интересно,

BritishDeveloper

6

Но если они редактировали в середине, это убьет последнего персонажа, а не нового, верно?

Joe Mabel

6

Да, используется on (), и он работает как драгоценный камень. Спасибо. вот модифицированная и слегка подправленная скрипка: jsfiddle.net/nXMqc

B-Money

6

Проблема с нарезкой заключается в том, что если вы вводите символы до середины, они вставляются, а строка обрезается с конца. Если весь текст не виден сразу, это может сбивать с толку. Также при использовании функции val (..) для изменения значения курсор перемещается в конец строки. (если вы хотите протестировать их с помощью современного браузера в скрипке, вам необходимо удалить атрибут maxlength - в противном случае браузер установит ограничение).

Юха Паломяки

33

Обновление..live() Вместо этого используйте решение Eirik, так как оно более надежное.

Несмотря на то, что вам нужно решение, в котором не используется jQuery, я подумал, что добавлю его для тех, кто найдет эту страницу через Google и ищет решение в стиле jQuery:

$(function() {        
    // Get all textareas that have a "maxlength" property.
    $('textarea[maxlength]').each(function() {

        // Store the jQuery object to be more efficient...
        var $textarea = $(this);

        // Store the maxlength and value of the field.
        var maxlength = $textarea.attr('maxlength');
        var val = $textarea.val();

        // Trim the field if it has content over the maxlength.
        $textarea.val(val.slice(0, maxlength));

        // Bind the trimming behavior to the "keyup" event.
        $textarea.bind('keyup', function() {
            $textarea.val($textarea.val().slice(0, maxlength));
        });

    });
});

Надеюсь, это будет полезно для вас, гуглеры ...

Дана Вудман
источник

1

Функция привязки клавиатуры должна быть: $ (this) .val ($ (this) .val (). Slice (0, maxlength));

Брайан Валлелунга

@brian Ага, ты прав. Спасибо, что заметили мою ошибку, исправлено!

Дана Вудман

$ (это) .val (function (i, val) {return val.slice (0, maxlength)});

Дима Бильдин

этот фрагмент по-прежнему полезен, так как

перевод

32

HTML5 добавляет maxlengthатрибут к textareaэлементу, например:

<!DOCTYPE html>
<html>
    <body>
        <form action="processForm.php" action="post">
            <label for="story">Tell me your story:</label><br>
            <textarea id="story" maxlength="100"></textarea>
            <input type="submit" value="Submit">
        </form>
    </body>
</html>

В настоящее время это поддерживается в Chrome 13, FF 5 и Safari 5. Неудивительно, что это не поддерживается в IE 9. (Проверено в Win 7).

james.garriss
источник

5

Это решение позволяет избежать проблемы в IE, когда последний символ удаляется при добавлении символа в середине текста. Он также отлично работает с другими браузерами.

$("textarea[maxlength]").keydown( function(e) {
    var key = e.which;  // backspace = 8, delete = 46, arrows = 37,38,39,40

    if ( ( key >= 37 && key <= 40 ) || key == 8 || key == 46 ) return;

    return $(this).val().length < $(this).attr( "maxlength" );
});

Затем моя проверка формы решает любые проблемы, когда пользователь мог вставить (кажется, проблема только в IE) текст, превышающий максимальную длину текстового поля.

Крис Р.
источник

4

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

(Еще раз извините OP, который не запрашивал jQuery. Но серьезно, кто не использует jQuery в наши дни?)

$(function() {
    // Get all textareas that have a "maxlength" property.
    $("textarea[maxlength]").each(function() {

        // Store the jQuery object to be more efficient...
        var $textarea = $(this);

        // Store the maxlength and value of the field
        var maxlength = $textarea.attr("maxlength");

        // Add a DIV to display remaining characters to user
        $textarea.after($("<div>").addClass("charsRemaining"));

        // Bind the trimming behavior to the "keyup" & "blur" events (to handle mouse-based paste)
        $textarea.on("keyup blur", function(event) {
            // Fix OS-specific line-returns to do an accurate count
            var val = $textarea.val().replace(/\r\n|\r|\n/g, "\r\n").slice(0, maxlength);
            $textarea.val(val);
            // Display updated count to user
            $textarea.next(".charsRemaining").html(maxlength - val.length + " characters remaining");
        }).trigger("blur");

    });
});

НЕ тестировался с международными многобайтовыми символами, поэтому я не уверен, как именно он работает с ними.

Саймон Ист
источник

2

Также добавьте следующее событие для вставки в текстовое поле:

...

txts[i].onkeyup = function() {
  ...
}

txts[i].paste = function() {
  var len = parseInt(this.getAttribute("maxlength"), 10);

  if (this.value.length + window.clipboardData.getData("Text").length > len) {
    alert('Maximum length exceeded: ' + len);
    this.value = this.value.substr(0, len);
    return false;
  }
}

...

stusherwin
источник

Может ли кто-нибудь добавить это в тело ответа, если он считает, что это нормально? Пока для этого недостаточно очков.

Stusherwin

Функция вставки не стандартизирована. Я считаю, что это работает только в IE.

Джош Стодола

Я обновил свой ответ, чтобы справиться с ситуацией вставки. Спасибо!

Джош Стодола

2

Атрибут maxlength поддерживается в Internet Explorer 10, Firefox, Chrome и Safari.

Примечание . Атрибут maxlength <textarea>тега не поддерживается в Internet Explorer 9 и более ранних версиях, а также в Opera.

из HTML атрибута maxlength w3schools.com

Для IE8 или более ранних версий вам необходимо использовать следующие

//only call this function in IE
function maxLengthLimit($textarea){
    var maxlength = parseInt($textarea.attr("maxlength"));
    //in IE7,maxlength attribute can't be got,I don't know why...
    if($.browser.version=="7.0"){
        maxlength = parseInt($textarea.attr("length"));
    }
    $textarea.bind("keyup blur",function(){
        if(this.value.length>maxlength){
            this.value=this.value.substr(0,maxlength);
        }
    });
}

PS

Атрибут maxlength <input>тега поддерживается во всех основных браузерах.

из HTML атрибута maxlength w3schools.com

Eason
источник

1

Лучшее решение по сравнению с обрезкой значения текстового поля.

$('textarea[maxlength]').live('keypress', function(e) {
    var maxlength = $(this).attr('maxlength');
    var val = $(this).val();

    if (val.length > maxlength) {
        return false;
    }
});

Бхарат
источник

1

Вы можете использовать jQuery, чтобы сделать его простым и понятным

JSFiddle ДЕМО

<textarea id="ta" max="10"></textarea>

<script>
$("#ta").keypress(function(e){

    var k = e.which==0 ? e.keyCode : e.which;
    //alert(k);
    if(k==8 || k==37 || k==39 || k==46) return true;

    var text      = $(this).val();
    var maxlength = $(this).attr("max");

    if(text.length >= maxlength) {
        return false;   
    }
    return true;
});
</script>

Он протестирован в Firefox, Google ChromeиOpera

MaxEcho
источник

Я боюсь, что когда обработчик выполняется, textон заполняется «значением» текс-области до того, как он будет обновлен. Это значит, что ваш тест должен быть if( text.length +1 > maxlength) {return false;}. В противном случае можно было бы помещать только maxlength - 1символы внутрь:/

Stphane

Ваша скрипка позволяет пользователю ввести еще один символ. ИМО, ваш тест должен быть либо, if(text.length+1 > maxlength)либо if(text.length >= maxlength)...

Stphane

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

Ранджит Кумар

0

Небольшая проблема с приведенным выше кодом заключается в том, что val () не запускает событие change (), поэтому, если вы используете backbone.js (или другие фреймворки для привязки модели), модель не будет обновлена.

Я публикую, решение отлично поработало для меня.

$(function () {

    $(document).on('keyup', '.ie8 textarea[maxlength], .ie9 textarea[maxlength]', function (e) {
        var maxLength = $(this).attr('maxlength');
        if (e.keyCode > 47 && $(this).val().length >= maxLength) {
            $(this).val($(this).val().substring(0, maxLength)).trigger('change');
        }
        return true;
    });

});

Александр Белецкий
источник

0

Недавно я реализовал maxlengthповедение textareaи столкнулся с проблемой, описанной в этом вопросе: Chrome неправильно считает символы в текстовом поле с атрибутом maxlength .

Так что все реализации, перечисленные здесь, будут работать с небольшими ошибками. Чтобы решить эту проблему, я добавляю .replace(/(\r\n|\n|\r)/g, "11")ранее .length. И учел это при резке струны.

Я закончил примерно так:

var maxlength = el.attr("maxlength");
var val = el.val();
var length = val.length;
var realLength = val.replace(/(\r\n|\n|\r)/g, "11").length;
if (realLength > maxlength) {
    el.val(val.slice(0, maxlength - (realLength - length)));
}

Не уверен, что это полностью решит проблему, но пока это работает для меня.

Роман Поминов
источник

0

Попробуйте этот jQuery, который работает в IE9, FF, Chrome и предоставляет пользователям обратный отсчет:

$("#comments").bind("keyup keydown", function() {
    var max = 500;
    var value = $(this).val();
    var left = max - value.length;
    if(left < 0) {
        $(this).val( value.slice(0, left) );
        left = 0;
    }
    $("#charcount").text(left);
}); 

<textarea id="comments" onkeyup="ismaxlength(this,500)"></textarea>
<span class="max-char-limit"><span id="charcount">500</span> characters left</span>

Лесли Кинг
источник

0

Попробуйте использовать этот пример кода:

$("#TextAreaID1").bind('input propertychange', function () {
    var maxLength = 4000;
    if ($(this).val().length > maxLength) {
        $(this).val($(this).val().substring(0, maxLength));
    }
});

Нэвин
источник

-1

Это намного проще:

<textarea onKeyPress="return ( this.value.length < 1000 );"></textarea>

Развернуть фрагмент

erdomester
источник

2

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

Крис Бир

Как наложить maxlength на textArea в HTML с помощью JavaScript

Ответы: