web-dev-qa-db-ja.com

Html Textareaでmaxlengthを設定します

maxlengthにtextareaを設定するにはどうすればよいですか？そして、なぜmaxlengthがtextareaで正しく動作しないのですか？

htmlinputtextarea
49
Hitesh Prajapati

HTML5より前には、簡単ですが実行可能な方法があります。まず、textarea要素でmaxlength属性を設定します。

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

「input」と「propertychange」イベントの両方をバインドして、Firefox/SafariやIEなどのさまざまなブラウザーで動作するようにします。

96
aqingsao

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に入力する文字数を制限するには、onChangeイベントでjavascriptを使用する必要があります。その後、文字数をカウントして、それ以上の入力を禁止できます。

ここ は、テキスト入力と、サーバー側とクライアント側のスクリプトを使用してサイズを制限する方法に関する詳細な説明です。

ここ は別のサンプルです。

17
Oded

html4でtextareaのmaxlengthを行う簡単な方法は次のとおりです。

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

「100」を必要な数の文字に変更します

11
Dss

Aqingsaoの答えへのコメントで述べたように、少なくとも[Windows]では、textareaに改行文字が含まれている場合はまったく機能しません。

私は彼の答えをこうして少し変更しました：

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

今、改行で多くのデータを貼り付けようとすると、正確な数の文字が取得されます。

7
Coxy
$(function(){  
  $("#id").keypress(function() {  
    var maxlen = 100;
    if ($(this).val().length > maxlen) {  
      return false;
    }  
  })
});
1
Sony Aja
<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を使用できます。この例は、最大長のみを示し、入力をブロックしていません。

0
Maxtor

これを試して

$(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とまったく同じように動作します

0
smnbbrv

HTML5より前は、JavaScriptまたはサーバー側の検証によってのみこれを確認できました（JavaScriptは明らかにJavaScriptが有効な場合にのみ機能するため...）。テキストエリアにはネイティブのmax-length属性はありません。

HTML5以降は有効な属性であるため、DoctypeをHTML5として定義すると役立つ場合があります。ただし、すべてのブラウザーがこの属性をサポートしているかどうかはわかりません。

<!DOCTYPE html>
0
acme