[翻译]基于ASP.NET的NumericTextBox控件[Carol]

原文地址：http://www.codeproject.com/useritems/ASPNET_NumericTextBox.asp
demo下载

源码下载

基于ASP.NET的NumericTextBox控件

原作者：Lukas Holota  译者：Carol

只允许用户输入数字的ASP.NET控件

 

导言：

所有的程序都必须是“傻瓜式”的，因此我们正创建检验用户输入的控件，这便是其中之一。在这个网站（译者注：codeproject）我只找到了针对windows forms的解决方案。以下是ASP.NET解决方案的展示：

 

首先，对于控件有这样一个概念，它必须具备以下能力：

• 可选择输入负数
• 可选择输入小数或整数
• 可以从语言环境设置中自由选择或下载小数分隔符
• 处理ctrl+v
• 具备跨浏览器的兼容性

 

解决方案——关键点

 

• 处理所有的字符――最后我选择了“onkeypress”事件，因为如果基于这一事件的方法返回错误的话，字符将不会被键入文本框
• 过滤字符――所有字符都只有一个键代码，所以我只得把被允许的字符都列了个清单（由数字键盘上输入的数字与键盘顶行输入的数字的代码是不同的）并且像Shift, BackSpace, Delete and arrows这些功能键都必须是被允许的－只需一会儿的检测
• 可选择减号――减号必须是这一数值的第一个字符，因此我必须对有兼容性问题的光标位置进行校对，最后解决如下：

 

·                 function getCursorPosition(txt)

·                 {

·                     if(document.selection) // IE

·                     {

·                         txt.focus();

·                         var oSel = document.selection.createRange();

·                         oSel.moveStart('character', -txt.value.length);

·                         return oSel.text.length;

·                     }

·                     else(txt.selectionStart) // Firefox etc.

·                         return txt.selectionStart;

·                 }

       

•  可选择小数分隔符――哪一个？――这一控件允许输入小数或整数，但是不同国家使用不同的小数分隔符，所以我制作了一个能根据文化背景动态下载设置的方法：

                 private char GetDecimalSeparatorFromLocale()

                 {

                    return (System.Globalization.CultureInfo.CurrentUICulture.NumberFormat.NumberDecimalSeparator.ToCharArray())[0];

                }

       

• 小数分隔符必须符合一下几个条件：
• 必须是第一个字符
• 必须不是在减号后面
• 在一个数值中必须只有一个小数分隔符

 

这一“优美”的条件可检测所有这些条件：

       if(txt.value.replace("-", "").length > 0 && getCursorPosition(txt) > 0 && txt.value.indexOf(decimalSeparator) == -1 && decimals)

            return true;

        else

            return false;

        break;

       

 

。处理Ctrl + V——我曾多次去解决这一问题，最后最简单的方法却运作地最好，在“onchage”事件中有一检测方法。除了数字，可选择地减号以及小数字符外，不管字符是否被允许，都可以被检测

Collapse

        function CheckString(txt, negative, decimals, decimalSeparator)

        {

            var res = "";

            var decimalSeparatorCount = 0;

            for(i = 0; i < txt.value.length; i++)

            {

                if(i == 0 && txt.value.charAt(0) == "-" && negative)

                    res = "-";

                else

                {

                    if(IsNumber(txt.value.charAt(i))) // IsNumber function returns true if the char is 0-9

                        res += txt.value.charAt(i);

                    else

                    {

                        if(txt.value.charAt(i) == decimalSeparator && decimalSeparatorCount == 0 && decimals)

                        {

                            res += txt.value.charAt(i);

                            decimalSeparatorCount++;

                        }

                    }

                }

            }

            txt.value = res;

        }

       

 

• 跨浏览器的兼容性
• 就如我上文提到的，IE6，7对于确定光标位置有问题
• Safari为不同的功能键返回不同的键代码－对所有的键返回0，但是数字以及其他一些不被允许的字符的代码运行正常
• 已被检测的浏览器：IE 6,7, Opera 9, Firefox 2, Safari for windows beta 3, Netscape 8 (与firefox一样, 用于 Gecko engine)

 

 

使用代码

使用这一代码很简便，因为它继承了文本框格式，因此你可以校验和访问文本框里的值

    <cp:NumericTextBox AllowNegative="true" AllowDecimals="true" runat="server" ID="NumericTextBox1" />

 

 

这一控件主要是基于javascript，因此它可以简单地运用于其他平台。例如PHP, JSP等等，也可以用于ASP.NET。如果把它翻译了，请告知。


ps:这篇文章的控件我还没有用过，如发现有什么Bug，请与原作者联系