[原创] [WEB/JavaScript] 用JavaScript实现自定义控件 --- (1)显示提示信息的输入框

很多网站的输入框在用户输入前都会在其中显示一些信息提示用户需要输入什么,当用户用鼠标点击后又可以正常输入.

每个网站的实现都略有不同,俺也用JavaScript实现了一个,代码如下

 

 

function XTipEditorInit(obj) { var _Ctrl=obj; if(typeof(obj)!="object") return false; function _cbOnFocusIn() {//处理onfocusin消息,此函数中的this指的是控件本身,即_Ctrl if(this._tipmode==true) { this._tipmode=false; this.value=""; this.Update(); } this._call("onfocusin"); } function _cbOnFocusOut() {//处理onfocusout消息,此函数中的this指的是控件本身,即_Ctrl this._tipmode=(this.value=="" && typeof(this.tip)!="undefined" && this.tip!=""); this.Update(); this._call("onfocusout"); } function _cbCallOri(funcName) {//用来用event名来调用原有event函数 if(typeof(this["_ori" + funcName.toLowerCase()])=="function") this["_ori" + funcName.toLowerCase()](); } function _cbGetValue() { if(this._tipmode==true) return ""; else return this.value; } function _cbSetValue(str) { this.value=str; if(str!="") this._tipmode=false; this.Update(); } function _cbUpdate() { if(this.value=="" && this._tipmode==true && typeof(this.tip)!="undefined" && this.tip!="") { this.value=new String(this.tip); this.style.color=this.TipColor; } else this.style.color=this.FontColor; } function _Init() { //保存原有event函数 _Ctrl._orionfocusin=_Ctrl.onfocusein; _Ctrl._orionfocusout=_Ctrl.onfocusein; //新的event函数 _Ctrl.onfocusin =_cbOnFocusIn; _Ctrl.onfocusout=_cbOnFocusOut; _Ctrl._call=_cbCallOri; _Ctrl._tipmode = true; //添加新的方法和属性 _Ctrl.GetValue=_cbGetValue; _Ctrl.SetValue=_cbSetValue; _Ctrl.Update=_cbUpdate; if(typeof(_Ctrl.FontColor)=="undefined" || _Ctrl.FontColor=="") _Ctrl.FontColor=_Ctrl.style.color; if(typeof(_Ctrl.TipColor)=="undefined" || _Ctrl.TipColor=="") _Ctrl.TipColor="gray"; if(typeof(_Ctrl.tip)=="undefined") _Ctrl.tip=""; _Ctrl.Update(); return true; } return _Init(); }

 

 

使用方法

<input type=text id=editor1 tip="this is a text"> <script type="text/javascript"> .... XTipEditorInit(editor1); </script>

 

 

 注意函数XTipEditorInit给参数输入的Editbox添加了一些东西

   onfocusin     事件处理函数
   onfocusout   事件处理函数
   FontColor     字符串属性:输入的字符串的颜色,默认为style.color
   TipColor        字符串属性:提示信息的颜色,默认为"grey"
   tip                 字符串属性:提示信息字符串,默认为空

   function GetValue()    用于取得value的函数,直接用obj.value得到的有可能是tip 
   function SetValue(strValue)  设置value的值的函数.

   function Update()      更新显示的函数.当修改了某些属性,尤其是FontColor,TipColor,tip等,要调用此函数来更新显示