HTML <textarea> の最大長

Question

HTML に入力できる最大文字数を制限する方法 <textarea>?クロスブラウザーのソリューションを探しています。

Answer 1

の TEXTAREA タグには MAXLENGTH その方法を属性とするINPUT タグは、少なくともほとんどの標準ブラウザでは機能しません。使用できる文字数を制限する非常にシンプルかつ効果的な方法です。 タイプされた に TEXTAREA タグは:

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

注記： onKeyPress, 、ボタンの押下を防止します。 任意のボタン 含む バックスペースキー。

これは、ブール式の式が、新しい文字が必要な最大長に追加される前のフィールドの長さを比較しているため（この例では50、ここで自分のものを使用してください）、もう1つのスペースがある場合はtrueを返します。 false そうでなければ。ほとんどのイベントから false を返すと、デフォルトのアクションがキャンセルされます。したがって、現在の長さがすでに50（またはそれ以上）の場合、ハンドラーはfalseを返します、 KeyPress アクションはキャンセルされ、キャラクターは追加されません。

軟膏の中にハエが1匹いると、皮膚に貼り付けられる可能性があります。 TEXTAREA、それが原因ではありません KeyPress イベントを起動して、このチェックを回避します。Internet Explorer 5 以降には、 onPaste ハンドラーがチェックを含めることができるイベント。ただし、合計が制限を超えているかどうかを知るために、クリップボードで待っている文字の数も考慮する必要があることに注意してください。幸いなことに、IEにはウィンドウオブジェクトからのクリップボードオブジェクトも含まれています。1 したがって：

<textarea onKeyPress="return ( this.value.length < 50 );"
onPaste="return (( this.value.length +
window.clipboardData.getData('Text').length) < 50 );"></textarea>

繰り返しになりますが、 onPaste イベントと clipboardData オブジェクトは IE 5 以降のみです。クロスブラウザー ソリューションの場合は、 OnChange または OnBlur ハンドラーを使用して長さをチェックし、必要に応じて処理します (値をサイレントに切り捨てる、ユーザーに通知するなど)。残念ながら、これは発生中のエラーを捕捉できず、ユーザーがフィールドから離れようとした場合にのみ捕捉されます。これはあまりフレンドリーではありません。

ソース

また、完成したスクリプトをページに含める別の方法もあります。

http://cf-bill.blogspot.com/2005/05/textarea-maxlength-revisited.html

Answer 2

HTML5 でできるようになりました maxlength 属性オン <textarea>.

IE <= 9 および iOS Safari 8.4 を除くすべてのブラウザでサポートされています。見る caniuse.com のサポート表.

Answer 3

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

参照 HTML テキストエリアで最大長を設定する