文本框中的剩余字符数

引言

在工作中思考一个项目时，我意识到为具有固定最大长度的文本区域控件提供剩余字符数反馈会很有用。 最初，我打算创建内联代码来执行此任务，但是经过一些调整后，我发现该代码作为可重用的用户控件效果更好。 该控件的代码非常简单。

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{

    txtCount.Text = txtInput.MaxLength.ToString();
    
    txtInput.Attributes.Add("onKeyUp", 
       "javascript:document.getElementById('"+ txtCount.ClientID + 
       "').setAttribute('value', (" + txtInput.MaxLength + 
       " - parseInt(document.getElementById('" + txtInput.ClientID + 
       "').getAttribute('value').length)));");
}
public int MaxLength
{
    get { return txtInput.MaxLength; }
    set { txtInput.MaxLength = value; }
}
</script>

<table>
 <tr>
  <td>
   <asp:Label ID="Label1" runat=server>Characters Left: </asp:Label>
   <asp:TextBox ID="txtCount" runat="server" 
            BorderStyle="None" ReadOnly="True">0</asp:TextBox>
  </td>
 </tr>
 <tr>
  <td>
   <asp:TextBox ID=txtInput runat=server BorderColor="Gray" 
           BorderStyle="Solid" BorderWidth="1px" 
           Height="125px" MaxLength="2000" 
           TextMode="MultiLine" 
           Width="350px"></asp:TextBox>
  </td>
 </tr>
</table>

大部分工作是在Page_Load事件中完成的。 使用Attributes集合，我添加了一个OnKeyUp事件，该事件获取输入文本的长度，将其从输入文本框控件允许的最大长度中减去，并在另一个文本框中显示。 由于JavaScript基于控件的ID工作，并且ASP.NET动态地为每个生成的控件分配唯一的ID，因此您可以在页面上拥有数十个这样的控件，并且每个控件仅跟踪其自身的内容。

为了完善该控件，我建议通过用户控件的公共属性公开底层控件的一些属性（例如上面的MaxLength），以便可以为不同的页面/站点单独配置该控件。

注意事项

由于TextArea HTML控件不支持MaxLength，因此JavaScript将不会阻止用户输入更多字符。 但是，您可以针对MaxLength属性进行验证，或者在处理表单时简单地截断多余的文本。