Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Помогите оптимизировать код под IE, маскируемый Input 
:(
    Опции темы
AntonioBanderaz
Дата 4.11.2006, 13:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Velichko Anton
**


Профиль
Группа: Участник
Сообщений: 851
Регистрация: 28.4.2005
Где: Санкт-Петербург

Репутация: нет
Всего: 18



Собственно необходимый для тестирования код
Class.js - поддержка псевдоклассов
Код

var __CLASSES = new Array();
 function isArray(a)
 {
     return(a && a.constructor == Array);
 }
var Class = {
    create:function(name, initObject) {
        var superClass = initObject ? initObject.superClass : null;
        if (typeof superClass == "undefined")
            superClass = null;
    
        if (! superClass) {
            superClass = Class.getClassFromName('_Object');
            if (typeof superClass == "undefined")
            superClass = null;
        } 
        var newClass = new Object();
        Class.extend(newClass, Class);
        newClass.superClass = superClass;
    
        newClass.name = name;
        newClass.constructor = 
            function() { 
            this.__construct.apply(this, arguments);
            };
        __CLASSES[name] = newClass;
        eval(name + " =  newClass.constructor");
        if (superClass)
            Class.extend(newClass.constructor.prototype, superClass.prototype);
    
        Class.extend(newClass.constructor.prototype, { 
            getClass: function() { 
                      return(Class.getClassFromName(name));
                    }
             });
    
        var variables = initObject ? initObject.variables : null;
        if (typeof variables == "undefined")
            variables = null;
        var methods = initObject ? initObject.methods : null;
        if (typeof methods == "undefined")
            methods = null;
        if (! methods || (methods && !methods.__construct)) {
            Class.extend(newClass.constructor.prototype, 
                         {__construct: function () {
                     Class.extend(this, variables);
                             }});
        }
        if (methods) {
            Class.extend(newClass.constructor.prototype, methods);
        }
        var staticMethods = initObject ? initObject.staticMethods : null;
        if (typeof staticMethods == "undefined")
            staticMethods = null;
        if (staticMethods) {
            Class.extend(newClass.constructor, staticMethods);
        }
    
        var constants = initObject ? initObject.constants : null;
        if (typeof constants == "undefined")
            constants = null;
        if (constants) {
            Class.extend(newClass.constructor, constants);
        }
        return(newClass.constructor);
    },
    extend: function(cls, superCls) {
        for (property in superCls) {
            cls[property] = superCls[property];
        }
    },
    getName: function() {
        return(this.name);
    },
    getClassFromName: function(name) {
        return(__CLASSES[name]);
    },
    getSuper: function() {
        return(this.superClass);
    },
    injectClasses : function(object) {
        if (! (typeof object == "object")) return;
        var cls = null;
        if (object.__className && (cls = __CLASSES[object.__className])) { 
            Class.extend(object, cls.constructor.prototype);
            for (var obj in object) {
            Class.injectClasses(obj);
            }
        }
    }

}
Class.create('_Object');


Некоторые функции из AjaxEngine
Код

Function.prototype.bindAsEventListener = function(object) {
    var __method = this;
    return function(event) {
        return __method.call(object, event || window.event);
    }
}
AjaxEngine.addEventListener = function(sourceElement, eventName, target, capture) {
        if (isIE) {
            sourceElement.attachEvent('on' + eventName, target);
        } else {
            sourceElement.addEventListener(eventName, target, capture);
        }
    }


Сам код макскированного импута
Код

Class.create("AutoMask", {
    constants: {
        INSTANCES: Array()
    },
    variables: {
        field: null,
        mask: null,
        patterns: null
    },
    methods: {
        __construct: function(field) {
            if (AutoMask.INSTANCES[field] != undefined) {
                return;
            } else {
                this.rs = { 'a': 3, 'A': 7, 'x': 2, 'C':1, 'c': 5, '*': 8, 'R': 9, 'E': 10 };
                this.patterns = { '1': /[A-Z]/, '2': /[0-9]/,'3': /[а-я]/, '5': /[a-z]/, '8': /./ , '7': /[А-Я]/, '9':/[А-Я]/i, '10': /[a-z]/i};
                AutoMask.INSTANCES[field] = this;
                this.field = field;
                this.mask = this.getMask(field);
                if (this.field.value.length == 0) {
                    this.field.value = this.mask;
                }
                this.initEvents();
            }
        },
        getMask: function(field) {
            return field.getAttribute("mask") || "";
        },
        initEvents: function() {
            AjaxEngine.addEventListener(this.field, "keypress", this.onKeyPressHandler.bindAsEventListener(this));
            AjaxEngine.addEventListener(this.field, "keydown", this.onKeyDownHandler.bindAsEventListener(this));           
        },
        onKeyPressHandler: function(e) {
            e = window.event ? window.event : e;
            var keyCode = isNaN(e.which) ? e.keyCode : e.which;
            if (/^(0|8|46|35|36)$/.test(keyCode)) {
                cancelEvent(e);
                return false;
            }
            var char = String.fromCharCode(keyCode);
            if (this.field.value.length <= this.mask.length && this.getPosition() < this.mask.length) {
                this.insertChar(e);
            } else {
                cancelEvent(e);
                return false;
            }
            return false;
        },
        onKeyDownHandler: function(e) {
            e = window.event ? window.event : e;
            var keyCode = e.keyCode;
            switch (keyCode) {
                case  9: return true; // Tabkey pressed
                case 36:
                case 33:
                    this.setPosition(0);
                    break; // Home pressed
                case 35:
                case 34:
                    this.setPosition(this.field.length);
                    break; // End pressed
                case 37:
                    this.decPosition();  // влево
                    break;
                case 39:
                    this.incPosition();  // вправо
                    break;
                case  8:
                    this.decPosition();  // BackSpace
                    this.deleteChar(e);
                    break;
                case 46:
                    this.deleteChar(e);  // Delete
                    break;
                default:
                    cancelEvent(e);
            }
            return false;
        },
        deleteChar: function(e) {
            var p = this.getPosition();
            if (this.mask == null || trim(this.mask) == "") {
                return;
            }
            //alert(this.mask.charAt(p));
            if (/(A|C|X|R|E|\*)/i.test(this.mask.charAt(p))) {
                this.field.value = this.field.value.substring(0, p) +
                                   this.mask.charAt(p) +
                                   this.field.value.substring(p + 1, this.field.value.length);
            } else if (this.mask.charAt(p) != this.field.value.charAt(p)) {
                this.field.value = this.field.value.substring(0, p) +
                                   this.mask.charAt(p) +
                                   this.field.value.substring(p + 1, this.field.value.length);
            }
            cancelEvent(e);
            this.setPosition(p);
        },
        insertChar: function(e) {
            var p = this.getPosition();
            var keyCode = isNaN(e.which) ? e.keyCode : e.which;
            var chr = String.fromCharCode(keyCode);
            if (p == this.mask.length) return;
            var pat = null;
            if (/(A|C|X|R|E|\*)/i.test(this.mask.charAt(p))) {
                pat = this.rs[this.mask.charAt(p)];
                pat = this.patterns[pat];
                if (pat != null && pat != undefined) {
                    document.getElementById("maska").value += pat + '  ' + chr;
                    if (pat.test(chr)) {
                        document.getElementById("maska").value += pat;
                        this.field.value = this.field.value.substring(0, p) +
                                           chr +
                                           this.field.value.substring(p + 1, this.field.value.length);
                    } else {
                        cancelEvent(e);
                        return;
                    }
                }
            } else {
                this.field.value = this.field.value.substring(0, p) +
                                   this.mask.charAt(p) +
                                   this.field.value.substring(p + 1, this.field.value.length);
                this.incPosition();
                // пропускаем до того как мы не найдём служ символ;
                this.insertChar(e);
            }
            this.setPosition(p);
            this.incPosition();
            cancelEvent(e);
        },
        setPosition: function(pos) {
            if (pos < 0 && pos > this.field.length) return;
            if (document.selection) {
                var tr = this.field.createTextRange();
                if (tr) {
                    tr.moveStart("character", pos);
                    tr.collapse();
                    tr.select();
                }
            }
            else if (this.field.selectionStart || this.field.selectionStart == '0') {
                this.field.selectionStart = pos;
                this.field.selectionEnd = pos;
                this.field.focus();
            }
        },
        incPosition: function() {
            this.setPosition(this.getPosition() + 1);
        },
        decPosition: function() {
            this.setPosition(this.getPosition() - 1);
        },
        getPosition: function() {
            var currentPos = 0;
            this.field.focus();
            if (document.selection) {  // IE
                var oSel = document.selection.createRange();
                oSel.moveStart('character', -this.field.value.length);
                currentPos = oSel.text.length;
            }
            else if (this.field.selectionStart || this.field.selectionStart == '0') {   // Mozz
                currentPos = this.field.selectionStart;
            }
            this.field.focus();
            return currentPos;
        }
    }
});

function cancelEvent(e) {
    e.preventDefault ? e.preventDefault() : e.returnValue = false;
    e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
}


Код для тестирования
Код

<html>
<head>
    <title></title>
</head>
<body>

<script type="text/javascript" language="JavaScript" src="Class.js"></script>
<script type="text/javascript" language="JavaScript" src="AjaxEngine.js"></script>
<script type="text/javascript" language="JavaScript" src="autoMask.js"></script>
Mask : <span id="maska">(xx)[AA] - CC/RRRR</span>
<form name="ww" action="">
    <br/>
    <input type="text" name="ssn" id="myMask" onfocus="new AutoMask(this);" value="" mask="(xx)[AA] - CC/RRRR"/>
    <br/><br/>
    <input type="text" name="qq"/>
</form>
<div id="num">&nbsp;</div>
<div id="info">&nbsp;</div>
</body>
</html>


Под мозилой всё ок, а под IE какая-то трабла с событиями...


--------------------
ГЫ... 
PM MAIL ICQ   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.0420 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.