ASP.NET 仿腾讯微博提示“还能输入*个字符”的实现_.NET_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > .NET > ASP.NET 仿腾讯微博提示“还能输入*个字符”的实现

ASP.NET 仿腾讯微博提示“还能输入*个字符”的实现

 2014/10/9 17:51:59  技术狂  程序员俱乐部  我要评论(0)
  • 摘要:textbox如果设置TextMode="MultiLine"则它的MaxLength设置的值就无效;为了能达到像腾讯微薄、新浪微薄那样的提示的效果(腾讯和新浪微薄文本框用到的应该是textarea),尝试如果不考虑用鼠标操作粘贴、删除textbox的内容,用jquery的keyup和keydown能实现,下面是实现的一个技巧,用到了js的计时器(当焦点在textbox中则“开启”计时器,失去焦点则“关闭”计时器),很好的解决了鼠标操作粘贴
  • 标签:.net ASP.NET 实现 net 腾讯 微博

textbox如果设置TextMode="MultiLine"则 它的MaxLength设置的值就无效;为了能达到像腾讯微薄、新浪微薄那样的提示的效果(腾讯和新浪微薄文本框用到的应该是textarea),尝试如果不考虑用鼠标操作粘贴、删除textbox的内容,用jquery的keyup和keydown能实现,下面是实现的一个技巧,用到了js的计时器(当焦点在textbox中则“开启”计时器,失去焦点则“关闭”计时器),很好的解决了鼠标操作粘贴、删除textbox的内容不能改变字符个数的问题

首先在head标记中添加如下js代码 当然还要引用jquery.js,这里知道就好了!   class="jscript plain"><script> 02    03         vart = ""; 04         functionmaxLimit() { 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         functionsetTimeouts() { 16             maxLimit(); 17             t = setTimeout("setTimeouts()", 1 * 10); 18         }; 19    20         functionclearTimeouts() { 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:TextBoxID="txtContent"runat="server"Width="500px"TextMode="MultiLine"MaxLength="140"   Height="100px"></asp:TextBox></div>     <div><spanid="txtleft">还能输入</span><asp:LabelID="LabelContent"runat="server"ForeColor="Red"    Text="140"></asp:Label><span>个字符</span></div>
发表评论
用户名: 匿名