采用JS面向对象+jquery技术实现textbox的掩码功能

    今天上午花了2个小时的时间终于把一个关于textbox掩码的问题给搞定了.  其实本来功能已经实现,老的做法是直接在texbox中的onclick事件中去写脚本,但是考虑到程序中用到掩码的texbox实在是太多了,所以只好想方设法做成一个通用而且灵活扩展的js函数.

 

基本思路: 首先将页面中所要添加掩码功能的textbox作为一个对象来看待, 有id,maskText,maskColor三个基本的属性,其中id属性是必须的.

             其次给每一个textbox动态绑定触发事件: onclick + onblur

确定了思路之后,直接贴代码.

代码

< script type = " text/javascript " >
( function () {
var maskTextDefult = ' please input one value ' ; // set one defalt value for textbox
var maskColorDefault = ' #999 ' ; // set defalut color for mask text.

// create one mask text object.
var MaskText = function (id, maskText, maskColor) {
this .obj = document.getElementById(id);
this .maskText = maskText;
this .maskColor = maskColor;
}
// set trigger event.
var events = [ ' click ' , ' blur ' ];
var SetEvent = function (texts) {
// 定义一个MaskText对象数组
var masks = [];
for ( var j = 0 ; j < texts.length; j ++ ) {
masks.push( new MaskText(texts[j].id, ( typeof texts[j].maskText == ' undefined ' ) ? maskTextDefult : texts[j].maskText, ( typeof texts[j].maskColor) == ' undefined ' ? maskColorDefault : ddtexts[j].maskColor));
}
for ( var i = 0 ; i < masks.length; i ++ ) {
( function () {
var item = masks[i];
item.obj.value = item.maskText;
item.obj.style.color = item.maskColor;
item.obj[ " on " + events[ 0 ]] = function () {
if (item.obj.value == item.maskText) { item.obj.style.color = ' #333 ' ; item.obj.value = '' ; }
}
item.obj[ " on " + events[ 1 ]] = function () {
if (item.obj.value == '' ) { item.obj.style.color = item.maskColor; item.obj.value = item.maskText; }
}
})(); // 闭包
}
}
// *** 页面加载完毕后调用方法SetEvent方法
$( function () {
SetEvent([{ id: ' text1 ' }, { id: ' text2 ' , maskText: ' test ' }]);
}
});
})();
< / script>

 

通过这个例子我对js面向对象的编程以及js中闭包的原理有了更深的了解, 希望跟各位好友一样继续努力.

 

 

以下原始的写法:

代码

< input type ="text" id ="txtRejectReason" maxlength ="100" onclick ="javascript:if(this.value=='input no more than 100 chars') {this.value=''; this.style.color='#333';}" onblur ="javascript:if(this.value=='') {this.value='input no more than 100 chars';this.style.color='#999';}" value ="input no more than 100 chars" />

 

转载于:https://www.cnblogs.com/guangpeng/archive/2010/11/05/1869901.html