HTML <textarea> の最大長
-
09-06-2019 - |
質問
HTML に入力できる最大文字数を制限する方法 <textarea>
?クロスブラウザーのソリューションを探しています。
解決
の 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
他のヒント
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;
}
})
});