采用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"/>