简单 NumericTextBox Web自定义控件

分享于 

4分钟阅读

Web开发

  繁體

介绍

只允许使用客户端JavaScript代码的整数输入的简单textbox控件。 它还提供 int 类型的属性,从而使设置和获取控件的值变得更加容易。

使用代码

使用 NumericTextBox 就像使用内置的TextBox 控件一样简单。 可以在设计时通过设计器更改 NumericTextBox 值,也可以通过代码在运行时更改。

Screenshot - n1.jpg

<body><formid="form1"runat="server"><cc1:NumericTextboxID="NumericTextbox1"runat="server"Value="76">76</cc1:NumericTextbox></form></body>

NumericTextBox 控件提供用于获取或者设置它的整数值的public 属性:

[Description ("The integer value of the NumericTextBox")]publicint Value
{
 get {
 int ret;
 // If text cannot be parsed as integer, return zero// otherwise return the parsed integerif (!int.TryParse(Text,out ret)) 
 return0;
 return ret;
 }
 set { Text = value.ToString(); }
}

让我们看看 NumericTextBoxprerender 事件发生了什么:

protectedoverridevoid OnPreRender(EventArgs e)
{
 string scriptName = "ValidationScript";
 if (!Page.ClientScript.IsClientScriptBlockRegistered(scriptName))
 Page.ClientScript.RegisterClientScriptBlock(Page.GetType(),
 scriptName,
 "<script language="""javascript">" +
 " function IsNumeric(e,elem) {" +
 " var currentText = elem.value;" +
 " if(window.event)" + // MSIE" {" +
 " keynum = e.keyCode;" +
 " }" +
 " else if(e.which)" + // Netscape/Firefox/Opera" {" +
 " keynum = e.which;" +
 " }" +
 // allow numeric keys" return (keynum> = 48 && keynum <= 57)" +
 // allow '-' only if it's the first char" || (keynum == 45 && currentText == '')" +
 // allow delete and backspace keys" || (keynum == 8) || (keynum == 127);" +
 " } </script>");
 Attributes.Add("onKeyPress", "return IsNumeric(event,this)");
 base.OnPreRender(e);
}

在 上面 代码中,我们将 KeyPress 事件的处理分配给一个名为 IsNumeric()的客户端JavaScript函数。 如果按下的键是有效的数字键,则这里函数返回 true,否则返回 false。 所以任何无效的按键都被忽略。

由于各种浏览器处理 KeyPress 事件的不同方式,按下的键按不同的方式分配给本地变量 keynum。 因此,如果使用的浏览器是 IE,则值取自事件对象的keyCode 属性;否则,将从事件对象的'which'属性获取值。

在以下情况下,函数返回 true:

  • 按键是一个数字键( 0 -9 ),它的键值从 48 ( 零的键数) 到 57 ( 键为9 )。
  • 按下的键是减号( - ),仅当它是文本框的输入文本的第一个字符时
  • 按下的键是 delete 键( 键号 8 )
  • 按下的键是退格键( 键号 127 )

结束语

这只是一个简单的定制控件,主要由实现互联网上的数字验证的各种JavaScript代码激发。 将来的改进可能是十进制数支持和溢出/下溢检查。

感谢你阅读 !


相关文章