Установить максимальную длину в Html Textarea

Как установить maxlength в textarea? И почему maxlength работает неправильно в textarea?

Ответ 1

До HTML5 у нас есть простой, но работоспособный способ: Сначала установите атрибут maxlength в элементе textarea:

<textarea maxlength='250' name=''></textarea>

Затем используйте JavaScript для ограничения ввода пользователем:

$(function() {  
    $("textarea[maxlength]").bind('input propertychange', function() {  
        var maxLength = $(this).attr('maxlength');  
        if ($(this).val().length > maxLength) {  
            $(this).val($(this).val().substring(0, maxLength));  
        }  
    })  
});

Удостоверьтесь, что привязаны как " ввод", так и " propertychange", чтобы он работал в разных браузерах, таких как Firefox/Safari и IE.

Ответ 2

Если вы используете HTML 5, вам нужно указать это в объявлении DOCTYPE.

Для действительного документа HTML 5 он должен начинаться с:

<!DOCTYPE html>

До HTML 5 элемент textarea не имел атрибута maxlength.

Это можно увидеть в DTD/spec:

<!ELEMENT TEXTAREA - - (#PCDATA)       -- multi-line text field -->
<!ATTLIST TEXTAREA
  %attrs;                              -- %coreattrs, %i18n, %events --
  name        CDATA          #IMPLIED
  rows        NUMBER         #REQUIRED
  cols        NUMBER         #REQUIRED
  disabled    (disabled)     #IMPLIED  -- unavailable in this context --
  readonly    (readonly)     #IMPLIED
  tabindex    NUMBER         #IMPLIED  -- position in tabbing order --
  accesskey   %Character;    #IMPLIED  -- accessibility key character --
  onfocus     %Script;       #IMPLIED  -- the element got the focus --
  onblur      %Script;       #IMPLIED  -- the element lost the focus --
  onselect    %Script;       #IMPLIED  -- some text was selected --
  onchange    %Script;       #IMPLIED  -- the element value was changed --
  %reserved;                           -- reserved for possible future use --
  >

Чтобы ограничить количество символов, набранных в textarea, вам нужно будет использовать javascript с событием onChange. Затем вы можете подсчитать количество символов и запретить дальнейшую ввод текста.

Здесь - это углубленное обсуждение ввода текста и использование сценариев на сервере и на стороне клиента для ограничения размера.

Здесь - еще один пример.

Ответ 3

Простой способ сделать maxlength для textarea в html4:

<textarea cols="60" rows="5" onkeypress="if (this.value.length > 100) { return false; }"></textarea>

Измените "100" на любое количество символов, которые вы хотите

Ответ 4

Как я уже сказал в комментарии к ответу Aqingsao, он не совсем работает, когда textarea имеет символы новой строки, по крайней мере, в Windows.

Я слегка изменил его ответ:

$(function() {
    $("textarea[maxlength]").bind('input propertychange', function() {
        var maxLength = $(this).attr('maxlength');
        //I'm guessing JavaScript is treating a newline as one character rather than two so when I try to insert a "max length" string into the database I get an error.
        //Detect how many newlines are in the textarea, then be sure to count them twice as part of the length of the input.
        var newlines = ($(this).val().match(/\n/g) || []).length
        if ($(this).val().length + newlines > maxLength) {
            $(this).val($(this).val().substring(0, maxLength - newlines));
        }
    })
});

Теперь, когда я пытаюсь вставить много данных в новые строки, я получаю точно правильное количество символов.

Ответ 5

$(function(){  
  $("#id").keypress(function() {  
    var maxlen = 100;
    if ($(this).val().length > maxlen) {  
      return false;
    }  
  })
});

Ответ 6

До HTML5 это можно проверить только с помощью JavaScript или с помощью проверки на стороне сервера (лучше, потому что JavaScript, очевидно, работает только с включенным JavaScript...). Нет атрибута максимальной длины для текстовых областей.

Так как HTML5 это действительный атрибут, поэтому определение вашего doctype как HTML5 может помочь. Я не знаю, поддерживают ли все браузеры этот атрибут:

<!DOCTYPE html>

Ответ 7

попробуйте это

$(function(){
  $("textarea[maxlength]")
    .keydown(function(event){
       return !$(this).attr("maxlength") || this.value.length < $(this).attr("maxlength") || event.keyCode == 8 || event.keyCode == 46;
    })
    .keyup(function(event){
      var limit = $(this).attr("maxlength");

      if (!limit) return;

      if (this.value.length <= limit) return true;
      else {
        this.value = this.value.substr(0,limit);
        return false;
      }    
    });
});

Для меня работы действительно идеальны без прыжков/показов дополнительных персонажей; работает точно так же, как maxlength на входе

Ответ 8

<p>
   <textarea id="msgc" onkeyup="cnt(event)" rows="1" cols="1"></textarea> 
</p> 
<p id="valmess2" style="color:red" ></p>

function cnt(event)
{ 
 document.getElementById("valmess2").innerHTML=""; // init and clear if b < max     
allowed character 

 a = document.getElementById("msgc").value; 
 b = a.length; 
 if (b > 400)
  { 
   document.getElementById("valmess2").innerHTML="the max length of 400 characters is 
reached, you typed in  " + b + "characters"; 
  } 
}

maxlength действителен только для HTML5. Для HTML/XHTML вам нужно использовать JavaScript и/или PHP. С PHP вы можете, например, использовать strlen. Этот пример указывает только максимальную длину, не блокируя вход.

Ответ 9

изменить размер: нет; Это свойство фиксирует вашу текстовую область и связывает ее. вы используете этот идентификатор свойства css вашей текстовой области textarea.gave, и от имени этого идентификатора вы можете использовать это свойство css.