具有内置自动跳转功能的电话/传真字段服务器控件

• 下载演示项目 - 15.5 Kb
• 下载源代码 - 6.2 Kb

引言

在构建下一个大型用户驱动的 Web 应用程序的过程中，非常优秀的开发人员往往会忽略许多功能，并经常将其归类为不相关的功能。不幸的是，当您有两个或多个本质上做同样事情的 Web 社区时（现在的情况经常是这样），正是这些小事将决定哪个网站能获得更忠实的用户群。

背景

用于在表单中检索电话号码的字段就是其中之一，虽然不是任务关键型，但却是让您网站访问者的生活更轻松的有效方式，即使只是微不足道的帮助。在我的开发经验中，我一直无法忍受用户在我的网站上输入电话或传真号码时，每次手动 Tab 键在三个字段之间跳转。实现电话字段自动跳转功能的 JavaScript 代码非常简单，手动将其附加到您的 ASP.NET TextBox 服务器控件也很简单。然而，真正的完美只有将 JavaScript 和 ASP.NET TextBox 结合到一个可重用的服务器控件中才能实现。

使用代码

CSGControls.PhoneField 是解决自动跳转电话字段控件问题的一个方案。您可以通过下载本文附带的代码，在您的 Web 应用程序中使用它。通过在设计视图中的工具箱区域中单击鼠标右键，然后单击“添加/移除项”，并浏览到控件 DLL 的位置，将控件添加到您的工具箱中。

电话字段控件不是一个笨重的控件，只带有一些属性，这些属性使其能够实现其目的。以下是一些属性。

属性	描述
formattedText: string	根据您指定的标签分隔符（默认为 (xxx) xxx-xxxx）返回电话值的格式化版本。
EnableClientScript: bool	提供一个选项，允许您在您的站点上添加电话字段，而无需在运行时使用默认的 JavaScript。

控制魔法的 JavaScript 代码首先被分配给服务器控件类中的一个局部变量，然后在运行时渲染到浏览器。下面是 JavaScript 的一瞥

protected const string MOVE_FOCUS_SCRIPT = @" 
    ...
   function __Move_Focus(obj,evt,len,next_field)
   {
       var phone_field_length
      if (evt == 'down') {
         phone_field_length=obj.value.length;
       }
       else if (evt == 'up') 
       {
           if (obj.value.length != phone_field_length) 
           {
          phone_field_length=obj.value.length;
          if (phone_field_length == len) 
          {
              document.getElementById(next_field).focus();
          }
            }
        }
     }
     ...
    ";

上面的代码主要跟踪每个字段中的击键。这些字段都被分配了它们可以包含的最大字符数。每次击键后，都会检查以检测是否已达到分配给每个字段的最大字符数。如果确实达到了最大值，则脚本会将焦点移动到下一个字段（如果适用）。

该脚本在控件生命周期的 OnPreRender 事件中添加到浏览器，如下面的代码片段所示。

protected override void OnPreRender(EventArgs e)
{
    base.OnPreRender (e);

    //id the register Javascript code
    //(only one copy is needed per web form)
    string typename = typeof(PhoneField).ToString().Replace(".","_");

    DetermineRenderClientScript();

    if (renderClientScript)
    {
        //register the autotab javascript
        //if it is not already registered
        if(!Page.IsClientScriptBlockRegistered(typename))
        {
            Page.RegisterClientScriptBlock(typename,MOVE_FOCUS_SCRIPT);

        }

    }
}

在我们的电话字段控件的第一个和第二个字段上，我们添加了“onKeyUp”和“onKeyDown”事件的事件处理程序。我们的 onKeyDown 事件更新了相关字段的字符计数，而我们的 onKeyUp 事件将其与最大允许字符数进行比较，并在必要时将光标移动到下一个字段。

...
_field2.Attributes.Add("onKeyUp", MOVE_FOCUS_FUNC + 
                       "(this,\'up\',3,\'"+(this.UniqueID + 
                       "_" + _field3.ClientID)+"\')");
_field2.Attributes.Add("onKeyDown", MOVE_FOCUS_FUNC + 
                       "(this,\'down\',3)");
...

可能的增强功能

虽然我为字符串格式（例如，“{0} {1}-{2}”）做出了安排，但我并没有充分利用它。理想情况下，可以使用一个标志来确定是使用格式字符串属性来格式化文本字段，还是允许用户通过单独的属性分配格式化字符串，就像我当前的示例中一样。

祝您编码愉快！