带 MaxLength 验证的多行文本框

• 下载源代码 - 13.7 KB

引言

在几乎所有的 Web 项目中，我们都需要一个多行 TextBox 控件。 令人烦恼的是，发现 maxLength 属性对多行文本框不起作用。 有各种解决方案建议使用验证器控件来验证长度。 我建议我们应该同时放置一个验证器并扩展我们的控件，以便用户无法输入超过指定长度的字符。

扩展 TextBox

为了实现这一点，我尝试扩展了 ASP.NET TextBox WebControl。

using System;
using System.Collections.Generic;
using System.Text;
using System.Web.UI.WebControls;

namespace CustomWebControls
{
    /// <summary>
    /// Extended TextBox control that applies
    /// javascript validation to Multiline TextBox
    /// </summary>
    public class TextArea: TextBox
    {
        /// <summary>
        /// Override PreRender to include custom javascript
        /// </summary>
        /// <param name="e"></param>
        protected override void OnPreRender(EventArgs e)
        {
            if (MaxLength > 0 && TextMode == TextBoxMode.MultiLine)
            {
                // Add javascript handlers for paste and keypress
                Attributes.Add("onkeypress","doKeypress(this);");
                Attributes.Add("onbeforepaste","doBeforePaste(this);");
                Attributes.Add("onpaste","doPaste(this);");
                // Add attribute for access of maxlength property on client-side
                Attributes.Add("maxLength", this.MaxLength.ToString());
                // Register client side include - only once per page
                if(!Page.ClientScript.IsClientScriptIncludeRegistered("TextArea"))
                {
                    Page.ClientScript.RegisterClientScriptInclude("TextArea", 
                        ResolveClientUrl("~/js/textArea.js"));
                }
            }
            base.OnPreRender(e);
        }
    }
}

现在我们的自定义控件可以使用了。 在上面的代码块中，应该不难理解，如果我发现 TextBox 的 TextMode 属性为 MultiLine，我会添加自定义 JavaScript 和一个属性，以便在客户端传递 maxLength。 我利用 ClientScript 附加一个 JavaScript，每页只有一个。 我选择将 JavaScript 作为外部文件包含，因为这允许我们轻松修改 JavaScript。 此外，页面不会变得臃肿，并且脚本将被缓存。

我在一个项目库中创建了这个控件，以便我可以在我们的任何项目中都使用这个控件。

JavaScript 文件

// Keep user from entering more than maxLength characters
function doKeypress(control){
    maxLength = control.attributes["maxLength"].value;
    value = control.value;
     if(maxLength && value.length > maxLength-1){
          event.returnValue = false;
          maxLength = parseInt(maxLength);
     }
}
// Cancel default behavior
function doBeforePaste(control){
    maxLength = control.attributes["maxLength"].value;
     if(maxLength)
     {
          event.returnValue = false;
     }
}
// Cancel default behavior and create a new paste routine
function doPaste(control){
    maxLength = control.attributes["maxLength"].value;
    value = control.value;
     if(maxLength){
          event.returnValue = false;
          maxLength = parseInt(maxLength);
          var oTR = control.document.selection.createRange();
          var iInsertLength = maxLength - value.length + oTR.text.length;
          var sData = window.clipboardData.getData("Text").substr(0,iInsertLength);
          oTR.text = sData;
     }
}

使用自定义控件

为了测试自定义控件，我创建了一个测试网站并添加了对项目的引用。 我想避免在每个页面上添加 注册标签 的麻烦，所以我直接在 web.config 的 system.web 部分添加了以下语句。

<pages>
   <controls>
    <add tagPrefix="CustomControls" 
      namespace="CustomWebControls" 
      assembly="CustomWebControls"></add>
   </controls>
</pages>

然后我创建了一个测试网页，并将控件添加到页面上，如下所示

<CustomControls:TextArea runat="server" ID="testTextArea" 
   MaxLength="10" TextMode="MultiLine"></CustomControls:TextArea>

然后我将 JavaScript 文件放在 JS 文件夹中。

测试了解决方案，成功了！ 我第一次尝试创建扩展的自定义 Web 控件是成功的。 我将感谢您的评论。

我学到的东西总结

• 扩展 Web 控件非常简单。
• Page 的新 ClientScript 属性。 以及相关的 IsClientScriptIncludeRegistered 和 RegisterClientScriptInclude 属性。
• 在 Web.Config 中添加了标签前缀，而不是在每个页面上指定它。

支持的客户端浏览器

• IE 6.0

其他说明

• 为了使此控件在其他浏览器上也能工作，我们可能需要在 JS 文件中进行一些修改。
• 此解决方案是在 Visual Studio 2005 中开发的。 要将其转换为 Visual Studio 2003，我们只需要更改 IsClientScriptIncludeRegistered 和 RegisterClientScriptInclude 的调用即可。
• 有必要添加验证器控件以进行长度检查。 这将允许您验证输入，即使客户端脚本失败。

感谢 CodeProject 提供的所有帮助！