在 IE/Firefox 中,通过MaskEdit限制输入

分享于 

5分钟阅读

Web开发

  繁體 雙語

介绍

VC++中使用的XtremeToolkit中有一个非常有用的控件 CXTMaskEdit。 我设法将MaskEdit移植到 JavaScript,然后我开始创建JavSscript库。 唯一的目的就是更好的体验用户体验。

我为 IE/Firefox. 提供了几种类型的文本框

  • 文本框只接受非负整数
  • 文本框只接受整数
  • 文本框只接受货币( 比如,14.22 ) 和两个小数点
  • MaskEdit接受特殊字符串,如邮政编码,电话号码等。
  • 文本框失去焦点时自动修剪
  • 文本框如果为空则显示提示

演示

演示文稿在这里,请你自己尝试: 点击这里查看演示。

使用代码

在你的项目中,应该将 *.js 复制到项目中,并且有一个名为" help.txt"的文件,它描述了你需要在HTML页面中包括哪些文件。 Global.js 是必要的。

<head>//......
 <scriptlanguage="javascript"src="JSLib/Global.js"type="text/javascript"></script><scriptlanguage="javascript"src="JSLib/Textbox.Restriction.js"type="text/javascript"></script><scriptlanguage="javascript"src="JSLib/Textbox.MaskEdit.js"type="text/javascript"></script><scriptlanguage="javascript"src="JSLib/Textbox.Trim.js"type="text/javascript"></script><scriptlanguage="javascript"src="JSLib/Textbox.Tip.js"type="text/javascript"></script>//......</head>

然后,在加载页面时,应初始化文本框,例如:

function OnPageLoad()
{
 InitializeTrimBox(); 
 // all the first parameters of the functions below are the textbox id // initialize textbox only accepts nonnegative integerBox InitializeTextbox( "txtAcceptNonnegativeIntegerBox", 
 InputType.NonnegativeInteger);
 // initialize textbox only accepts whole number InitializeTextbox( "txtAcceptWholeNumberBox", InputType.WholeNumber);
 // initialize textbox only accepts currency InitializeTextbox( "txtAcceptCurrencyBox", InputType.Currency);
 // initialize textbox only accepts Postal Code, such as"M1M 1M1" InitializeMaskEdit( "txtPostalCode", "$A$d$A $d$A$d");
 // initialize textbox only accepts telphone number, such as"(111)111-1111" InitializeMaskEdit( "txtTelPhone", "($d$d$d)$d$d$d-$d$d$d$d");
 // initialize textbox only accepts car number, such as"A*11111" InitializeMaskEdit( "txtCarNumber", "$$A*$d$d$d$d$d");
 // initialize textbox only accepts datetime, such as"2006-12-30" InitializeMaskEdit( "txtDateTime1", "$d$d$d$d-$d$d-$d$d");
 // initialize textbox only accepts datetime, such as"12/30/2006" InitializeMaskEdit( "txtDateTime2", "$d$d/$d$d/$d$d$d$d");
 // initialize tip box InitializeTipBox( "txtTipBox", 
 "If you do not change the password, left blank.");
}

不足

  • 目前不支持中文字符。 我想实现它,但这是非常困难的,我需要考虑更多。
  • 由于 Firefox 不支持 onpaste/ondrag/ondrop/oncut/oncontentmenu 事件,用户仍然可以通过粘贴。删除来输入无效字符串,因此这里脚本只用于提供更好的体验,并且需要使用 ASP.NET 验证控件。

历史记录

  • V1.0 2006-10-10: 已经创建。
  • V1.1 2006-10-15
    • 改进:重命名 InputType
    • 固定 Bug: 如果加载页时已经有掩码编辑值,则将删除该值。
    • 改进:将转义符更改为 $A $a $d.
    • 固定 Bug: 应防止内容菜单和在 IE 中进行遮罩编辑。
    • 改进:添加自动微调文本框。
    • 改进:添加提示文本框。
  • V1.2 2006-11-05
    • 改进:添加 JavaScript 对象浏览器。
    • 改进:对于 InitializeXXX 函数,可以通过控制ID或者实例。
    • 固定 Bug: 如果遮罩编辑获得焦点,输入 cursor 将移动到第一个未填充位置。
    • 改进:添加了AJAX类。

相关文章