TextBox の MaxLength が効かない

ASP.NET の TextBox における MaxLength

TextBox の MaxLength プロパティは、TextMode が MultiLine になっていると動作しないというバグが存在する。しかもこれは .NET Framework 4.5 になっても修正されていない。

JavaScript でゴリゴリ対処する

やや泥臭いが、これに関しては JavaScript で回避するしかない。

テキストボックス
<asp:TextBox ID="TextBox1" runat="server" Rows="5" TextMode="MultiLine" keypress="return CheckLength();" onblur="TrimValue();"></asp:TextBox>
JavaScript
// keypress イベントにセットする関数。
var maxlen = 100;
function CheckLength() {
 var textbox = document.getElementById("<%= TextBox1.ClientID %>").value;
 if (textbox.trim().length >= maxlen) {
  return false;
 } else {
  return true;
 }
}
半角文字であれば、上記の関数で問題はないだろうが、全角文字のチェックはできない。つまり、日本語環境では上記のチェックも役に立たない。これを対応させるのは OS やブラウザの差異によりかなり厳しいようだ。
また、半角であっても貼り付け(ペースト)られると全く意味がないので、貼り付け用のチェックを追加する。
// onblurイベントにセットする関数。
function TrimValue() {
 var textbox = document.getElementById("<%= TextBox1.ClientID %>").value;
 if (textbox.trim().length > maxlen) {
  document.getElementById("<%= TextBox1.ClientID %>").value = textbox.substr(0,maxlen);
  return;
 } else {
  return;
 }
}

jQuery で制御する手もある

jQuery が使えるなら、上記の例を一挙に解決することができる。しかも、変換前の日本語(全角)もカウントする。素晴らしい。
と思ったら、Chrome でしか動かない。だめだこりゃ…。
$(function() {
 var maxlength = 100;
 var tb = $('textarea[id$=TextBox1');
 $(tb).keyup(function() {
  var len = $(this).val().length;
  if (len > maxlength) {
   var s = $(this).val().slice(0, maxlength);
   $(this).val(s);
  }
 });
});
小手先だが、このような JavaScript で対応するしかないのだが、肝心なことは サーバー側でのチェックを必ず入れること である。

このブログの人気の投稿

コピーした行の挿入が表示されない時はフィルタされていないかチェック

Excel で入力した文字に勝手に取り消し線が入る