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

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

115 голосов
/ 14 июля 2009

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

<textarea maxlength="50"></textarea>
<textarea maxlength="150"></textarea>
<textarea maxlength="250"></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.

Ответы [ 15 ]

111 голосов
/ 14 июля 2009 
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;
    } 
  };

}
80 голосов
/ 09 мая 2011

Я знаю, что вы хотите избежать 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));
    }
});
33 голосов
/ 18 марта 2011

Обновление Используйте решение Эйрика, используя вместо этого .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));
        });

    });
});

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

31 голосов
/ 10 августа 2011

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)

5 голосов
/ 02 июля 2012

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

3 голосов
/ 01 июня 2012

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

(Еще раз извините 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 голосов
/ 06 июля 2013

Атрибут 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);
        }
    });
}

P.S.

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

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

2 голосов
/ 06 мая 2010

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

...

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

...
1 голос
/ 05 июня 2014

Вы можете использовать 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

1 голос
/ 25 января 2013

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

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

    if (val.length > maxlength) {
        return false;
    }
});
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...