Як накласти максимальну довжину 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))
}

Скопійовано з Який найкращий спосіб наслідувати атрибут HTML "maxlength" на текстовій області HTML?

Але справа в тому, що я не хочу писати onKeyPress та onKeyUp кожного разу, коли я оголошу текстArea.

javascript html textarea

— Ракеш Джуял
джерело

4

Максимум для текстових областей знаходиться в 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

Джош, здається, це спрацює, але ви, будь ласка, поясніть, що буде робити ця штука --- якщо (/ ^ [0-9] + $ /. Test (txts [i] .getAttribute ("maxlength"))) {- -

— Ракеш Джуял

2

Я думаю, що я пам'ятаю, у чому полягає угода: або FF, або IE (я думаю, що це FF) повертає інший рядок, коли Javascript перевіряє атрибут "value", ніж те, що він надсилає назад на сервер, коли форма розміщена! Це має щось спільне з тим, як роблять / не вставляють символи повернення каретки жорсткі лінії розривів. Це легко зрозуміти з допомогою коду налагодження на стороні клієнта та сервера.

— Поні

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));
    }
});

EDIT: оновлена версія для 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 з тих пір його застарів. Використовуйте на (). Якщо вас хвилює, чому: britishdeveloper.co.uk/2012/04/…

— BritishDeveloper

6

Але якщо вони будуть відредаговані посередині, це вб’є останнього персонажа, а не нового персонажа, правда?

— Джо Мейбл

6

Yep використовується на (), і це працює як дорогоцінний камінь. Дякую. ось модифікована та перероблена трохи скрипка: jsfiddle.net/nXMqc

— B-Money

6

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

— Juha Palomäki

33

Оновлення Використовуйте рішення Eirik, використовуючи .live()натомість, оскільки воно трохи надійніше.

Хоча ви хотіли рішення, яке не використовує jQuery, я подумав, що додам його для тих, хто знайде цю сторінку через Google і шукає рішення jQuery-esque:

$(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));
        });

    });
});

Сподіваємось, що корисні для вас Googlers там ...

— Дана Вудман
джерело

1

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

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

@brian Yup, ти маєш рацію. Дякуємо, що помітили мою помилку, виправлено!

— Дана Вудман

$ (це) .val (функція (i, val) {return val.slice (0, максимальна довжина)});

— Діма Білдін

цей фрагмент все ще корисний, оскільки канали рядків рахуються як 1 символ у веб-переглядачі та 2 у сервері ...

— bebbo

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

Це якийсь перероблений код, який я щойно використовував на своєму сайті. Удосконалено для відображення кількості залишилися символів користувачеві.

(Ще раз вибачте з ОП, який не вимагав 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

— Есон
джерело

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 DEMO

<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він заповнюється "значенням" texarea до його оновлення. Це означає, що ваш тест повинен бути if( text.length +1 > maxlength) {return false;}. В іншому випадку можна буде лише помістити maxlength - 1:/

— знаки

Ваша скрипка дозволяє користувачеві ввести ще один символ. ІМО, ваш тест повинен бути if(text.length+1 > maxlength)або if(text.length >= maxlength)...,

— Сфан

Коли я копіюю та вставляю вміст, він не працює так, як очікувалося

— Ranjit Kumar

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));
    }
});

— naveen
джерело

-1

Це набагато простіше:

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

Розгорніть фрагмент

— erdomester
джерело

2

Зауважте, що це рішення не повністю повторюється, maxlengthоскільки ви можете вставляти рядки довші потрібної довжини.

— Кріс Бір