[原创] 用JavaScript实现自定义控件 --- (2)可限制输入内容的editbox

用JScript写的可限制输入内容的editbox,有如下功能

1 使用简单,一个函数调用即可

2 使用正则表达式定义允许输入内容

3两种模式:

    a   可以输入任何字符,在输入不符合要求时用改变背景色来提示

    b   不能输入非法字符,仅适用于简单的正则表达式,如"[a-zA-Z0-9_]+".

 

以下是JScript代码

function XEditorInit(objCtrl, //希望控制的 HTML element strSyntax, //正则表达式的pattern strFlag/*="ig"*/, //正则表达式的flag bWarningOnly/*=true*/)//true : 可以输入任何字符,在输入不符合要求时改变背景色来提示 //false: 不能输入非法字符,适用于简单的正则表达式,如"[a-z]+". { if(typeof(objCtrl)!="object") return null; var mySyntax=""; var myFlag="ig"; var myWarningOnly=true; if(arguments.length>1 && typeof(strSyntax)!="undefined" && strSyntax!="") mySyntax=strSyntax; if(arguments.length>2 && typeof(strFlag)!="undefined" && strFlag!="") myFlag=strFlag; if(arguments.length>3) myWarningOnly=bWarningOnly; function XEditorHandler(obj, syntax, flag, warningonly) { var _Ctrl=obj; var _Syntax=syntax; var _Flag=flag; var _WarningOnly=warningonly; function _cbInput(){ //处理onkeypress消息,此函数中的this指的是控件本身,即_Ctrl var re = this.handler.getRegExp(); if( re != null && this.warningonly!=true) {//严格匹配 var chr=String.fromCharCode(event.keyCode); if(chr.replace(re,"")!="") { event.returnValue=false; return; } } this._call("onkeypress"); } function _cbPaste(){ //处理onpaste消息,此函数中的this指的是控件本身,即_Ctrl var re = this.handler.getRegExp(); if( re != null && this.warningonly!=true) { var chr=""; try { chr=clipboardData.getData("Text"); } catch(e) { } if(chr.replace(re,"")!="") { event.returnValue=false; return; } } this._call("onpaste"); this._call("onchange"); } function _cbChange(){//处理onchange消息,此函数中的this指的是控件本身,即_Ctrl if(this.handler.Validate()) return this._call("onchange"); } function _cbOnKeyUp() { //处理onkeyup消息,此函数中的this指的是控件本身,即_Ctrl if(this.handler.Validate()) { this._call("onkeyup"); this._call("onchange"); } } function _GetRegExp() {//产生正则表达式对象,失败返回null var regStr = _Ctrl.syntax; var flags = _Ctrl.rflag; if(regStr==null || typeof(regStr)!="string" || regStr=="") return null; else return new RegExp(regStr,flags); } function _Init(obj) { if(arguments.length>0) _Ctrl=obj; //保存原有event函数 _Ctrl._oriοnkeypress=_Ctrl.onkeypress; _Ctrl._orionpaste =_Ctrl.onpaste; _Ctrl._orionchange =_Ctrl.onchange; _Ctrl._orionkeyup =_Ctrl.onkeyup; //用来用event名来调用原有event函数 _Ctrl._call=function(funcName) { if(typeof(this["_ori" + funcName.toLowerCase()])=="function") this["_ori" + funcName.toLowerCase()](); } //新的event函数 _Ctrl.οnkeypress=_cbInput; _Ctrl.onpaste =_cbPaste; _Ctrl.onchange =_cbChange; _Ctrl.onkeyup =_cbOnKeyUp; //合法输入时的背景色,初始化为style中定义的颜色.see also : setNormalBgColor(colorValue) _Ctrl.NormalBgColor=_Ctrl.style.backgroundColor; //非法输入时的背景色,初始化为"red".see also : getErrorBgColor(colorValue) _Ctrl.ErrorBgColor="red"; _Ctrl.isValid=true; _Ctrl.syntax=_Syntax; _Ctrl.flag=_Flag; _Ctrl.warningonly=_WarningOnly; } function _Validate(){//判断输入是否合法 _Ctrl.isValid=true; var re = _GetRegExp(); var theStr=_Ctrl.value; if( re == null || theStr.replace(re,"")=="") {//如果产生正则表达式对象失败则认为输入是合法的 _Ctrl.style.backgroundColor=_GetNormalBgColor();//将背景色设置为合法状态的背景色 } else {//非法 _Ctrl.style.backgroundColor=_GetErrorBgColor();//将背景色设置为非法状态的背景色 _Ctrl.isValid=false; } return _Ctrl.isValid; } function _IsValid() { return _Ctrl.isValid; } function _GetElement() { return _Ctrl; } function _GetNormalBgColor() { return _Ctrl.NormalBgColor; } function _SetNormalBgColor(colorValue) { _Ctrl.NormalBgColor=colorValue; } function _GetErrorBgColor() { return _Ctrl.ErrorBgColor; } function _SetErrorBgColor(colorValue) { _Ctrl.ErrorBgColor=colorValue; } _Init(); //输出可供外部调用的接口. //Usage: // var p=XEditorHandler(...); // if(p.isValid()==false) ... return { Init:_Init, isValid:_IsValid, getRegExp:_GetRegExp, getElement:_GetElement, getNormalBgColor:_GetNormalBgColor, setNormalBgColor:_SetNormalBgColor, getErrorBgColor:_GetErrorBgColor, setErrorBgColor:_SetErrorBgColor, Validate:_Validate }; } objCtrl.handler=XEditorHandler(objCtrl,strSyntax,strFlag,myWarningOnly); return objCtrl.handler; }

 

 

用法很简单

<input type="text" id=editbox1> <mce:script type="text/javascript"><!-- .... var xEdito1 = XEditorInit(editbox1,"^[0-9]+[/.]{0,1}[0-9]{0,4}$");//允许输入小数"12345.1234" // --></mce:script>