asp.net 仿騰訊微薄提示還能輸入*個字符的實現(xiàn)代碼

更新時間：2011年10月12日 22:37:36 作者：

asp.net 仿騰訊微薄提示還能輸入*個字符的實現(xiàn)代碼，需要的朋友可以參考下。

textbox如果設置TextMode="MultiLine"則它的MaxLength設置的值就無效；為了能達到像騰訊微薄、新浪微薄那樣的提示的效果（騰訊和新浪微薄文本框用到的應該是textarea），嘗試如果不考慮用鼠標操作粘貼、刪除textbox的內(nèi)容，用jquery的keyup和keydown能實現(xiàn)，下面是實現(xiàn)的一個技巧，用到了js的計時器（當焦點在textbox中則“開啟”計時器，失去焦點則“關閉”計時器），很好的解決了鼠標操作粘貼、刪除textbox的內(nèi)容不能改變字符個數(shù)的問題
首先在head標記中添加如下js代碼
當然還要引用jquery.js,這里知道就好了！

復制代碼代碼如下:

 
<script> 
var t = ""; 
function maxLimit() { 
if ($.trim($("#txtContent").val()).length > 140) { 
$("#txtleft").text("已經(jīng)超出"); 
$("#LabelContent").text(($.trim($("#txtContent").val()).length) - 140); 
} 
else { 
$("#txtleft").text("還能輸入"); 
$("#LabelContent").text(140 - ($.trim($("#txtContent").val()).length)); 
} 
} 
function setTimeouts() { 
maxLimit(); 
t = setTimeout("setTimeouts()", 1 * 10); 
}; 
function clearTimeouts() { 
clearTimeout(t); 
}; 
$(document).ready(function() { 
//$("#txtContent").keyup(maxLimit); 
//$("#txtContent").keydown(maxLimit); 
$("#txtContent").bind("blur", clearTimeouts); 
$("#txtContent").bind("focus", setTimeouts) 
}); 
</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> 

您可能感興趣的文章: