ASP.NETはテンセントの微博をまねて“また*の文字を入力することができます”の実現をヒントにします

5192 ワード

textbox TextMode="MultiLine"を設定すると、そのMaxLength設定の値は無効になります.テンセントの薄さ、新浪の薄さのようなヒントの効果(テンセントや新浪の薄さテキストボックスで使うのはtextarea)を達成するために、マウス操作でtextboxの内容を貼り付けたり削除したりすることを考慮しなければ、jqueryのkeyupやkeydownで実現できるようにしてみましょう.jsを使用したタイマー(textboxにフォーカスを当てるとタイマーが「オン」、フォーカスを失うとタイマーが「オフ」)は、マウス操作でtextboxの内容を貼り付けたり削除したりしても文字数を変えることができないという問題をよく解決します
まずheadタグに次のjsコードを追加します.
もちろんjqueryも引用します.js、ここで知ればいいのに!
 <script> 02     03          var t =  "" ; 04          function maxLimit() { 05              if ($.trim($( "#txtContent" ).val()).length > 140) { 06                  $( "#txtleft" ).text( " " ); 07                  $( "#LabelContent" ).text(($.trim($( "#txtContent" ).val()).length) - 140); 08              } 09              else { 10                  $( "#txtleft" ).text( " " ); 11                  $( "#LabelContent" ).text(140 - ($.trim($( "#txtContent" ).val()).length)); 12              } 13          } 14     15          function setTimeouts() { 16              maxLimit(); 17              t = setTimeout( "setTimeouts()" , 1 * 10); 18          }; 19     20          function clearTimeouts() { 21              clearTimeout(t); 22          }; 23     24     25          $(document).ready( function () { 26     27              //$("#txtContent").keyup(maxLimit); 28              //$("#txtContent").keydown(maxLimit); 29              $( "#txtContent" ).bind( "blur" , clearTimeouts); 30              $( "#txtContent" ).bind( "focus" , setTimeouts) 31          }); 32              33 </script>
 
body編集に追加
 < div > < asp:TextBox ID = "txtContent" runat = "server" Width = "500px" TextMode = "MultiLine" MaxLength = "140"    Height = "100px" ></ asp:TextBox ></ div >       < div >< span id = "txtleft" > </ span >< asp:Label ID = "LabelContent" runat = "server" ForeColor = "Red"     Text = "140" ></ asp:Label >< span > </ span ></ div >