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 で対応するしかないのだが、肝心なことは サーバー側でのチェックを必ず入れること である。