3 に答える
タグには、タグのように属性
TEXTAREA
がありません。少なくとも、ほとんどの標準ブラウザではそうではありません。タグに入力できる文字数を制限する非常に簡単で効果的な方法は次のとおりです。MAXLENGTH
INPUT
TEXTAREA
<textarea onKeyPress="return ( this.value.length < 50 );"></textarea>
注: は、バックスペース キーを含むすべてのボタンonKeyPress
を押すのを防ぎます。
これが機能するのは、ブール式が、新しい文字が追加される前のフィールドの長さを必要な最大長 (この例では 50、ここでは独自のものを使用) と比較し、あと 1 文字分の余裕がある場合は true を返し、そうでない場合は true を返すためfalse
です。ほとんどのイベントから false を返すと、デフォルト アクションがキャンセルされます。そのため、現在の長さがすでに 50 (またはそれ以上) の場合、ハンドラーは false を返し、KeyPress
アクションはキャンセルされ、文字は追加されません。
軟膏の 1 つのハエは、このチェックを回避してTEXTAREA
、イベントを発生させないに貼り付ける可能性です。KeyPress
Internet Explorer 5 以降には、onPaste
ハンドラーにチェックを含めることができるイベントが含まれています。ただし、クリップボードで待機中の文字数も考慮して、合計が制限を超えるかどうかを判断する必要があることに注意してください。さいわい、IE には window オブジェクトのクリップボード オブジェクトも含まれています。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
orOnBlur
ハンドラーを使用して長さを確認し、必要に応じて処理するだけです (値をサイレントに切り捨てる、ユーザーに通知するなど)。残念ながら、これは発生しているエラーをキャッチするのではなく、ユーザーがフィールドを離れようとしたときにのみ発生します。これはあまり友好的ではありません。
また、ページに含めることができる完成したスクリプトを含む別の方法もあります。
http://cf-bill.blogspot.com/2005/05/textarea-maxlength-revisited.html
HTML5 では、maxlength
の属性が<textarea>
許可されるようになりました。
IE <= 9 および iOS Safari 8.4 を除くすべてのブラウザでサポートされています。caniuse.com のサポート表を参照してください。
$(function(){
$("#id").keypress(function() {
var maxlen = 100;
if ($(this).val().length > maxlen) {
return false;
}
})
});
Html Textarea の参照セット maxlength