Як налаштувати маску номеру телефону?

Нравится

2 комментария

Добрий день!

 

Ви можете налаштувати маску номеру телефону по інструкції з даної статті - https://academy.creatio.com/docs/user/nocode_platform/element_setup_exa…

Юлія Гриценко,

а чому для редагування поле маска заблоковано? права?

Показать все комментарии

Добрый день!

 

Подскажите варианты добаления маски номера телефона детали ContactCommunicationDetail.

 

На страничке раздела Контакты, при добавлении средства связи = моб телефон = была преднатсроена маска ввода номера телефона. 

Изображение удалено.

Нравится

2 комментария

Добрый вечер, Андрий!

 

На данный момент возможности настроить маску пользовательскими средствами нет.

 

Возможно, решить Вашу задачу поможет информация в этом посте https://community.terrasoft.ua/questions/maska-telefona-na-detali-sredstva-svyazi

Добрый день!

Как и сказала Алла, необходимы навыки разработки для добавления маски. Привожу пример как это сделать с колонкой контакта.

Для начала создаем модуль MultiMaskEdit

 define("MultiMaskEdit", ["ext-base", "terrasoft"], function(Ext, Terrasoft) {
    /**
     * @class Terrasoft.controls.MultiMaskEdit
     */
    Ext.define("Terrasoft.controls.MultiMaskEdit", {
        extend: "Terrasoft.TextEdit",
        alternateClassName: "Terrasoft.MultiMaskEdit",
 
        /**
         * @public
         * @type {Terrasoft.Align}
         */
        textAlign: Terrasoft.Align.LEFT,
        /**
         * @protected
         * @overridden
         */
        onFocus: function() {
            this.callParent(arguments);
            var value = this.getTypedValue();
            this.setDomValue(value);
        },
        /**
         * @protected
         * @virtual
         * @return {String}
         */
        getInitValue: function() {
            var value = this.callParent(arguments);
            if (!Ext.isEmpty(value) && !Ext.isEmpty(this.masks)) {
                var formatValue = this.formatValue(value);
                this.value = formatValue.value;
                var validationInfo = this.getValidationInfo(formatValue);
                this.setValidationInfo(validationInfo);
            }
            return this.value;
        },
        getValidationInfo: function(value) {
            var formatValue = (!Ext.isEmpty(value) && Ext.isBoolean(value.isComplete)) ? value : this.formatValue(value);
            var validationInfo = {
                isValid: true,
                invalidMessage: ""
            };
            if (!formatValue.isComplete) {
                validationInfo = {
                    isValid: false,
                    invalidMessage: this.getIncorrectNumberMessage()
                };
            }
            return validationInfo;
        },
        getIncorrectNumberMessage: function() {
            return "Invalid number";
        },
        /**
         * @protected
         * @overridden
         * @param  {Event} e DOM keypress
         * @param  {String} type (optional)
         * значение Terrasoft.DataValueType.FLOAT
         */
        onKeyPress: function(e) {
            this.callParent(arguments);
            if (this.readonly || Ext.isEmpty(this.masks)) {
                return;
            }
            var isSpecialKey = Ext.isGecko && e.isSpecialKey();
            if (isSpecialKey) {
                return;
            }
            e.preventDefault();
            var keyUnicode = e.getKey();
            var key = String.fromCharCode(keyUnicode);
            if (this.baseCharsRe && !this.baseCharsRe.test(key)) {
                return;
            }
            var domEl = e.getTarget();
            var info = this.getInputInfo(domEl);
            var formatValue = this.formatValueByInsChar(key, info.caretPosition, info.valueBeforeCaret, info.valueSelected,
                info.valueAfterCaret);
            if (!formatValue) {
                return;
            }
            domEl.value = formatValue.value;
            Terrasoft.utils.dom.setCaretPosition(domEl, formatValue.pos);
            if (!this.validationInfo.isValid && formatValue.isComplete) {
                var validationInfo = {
                    isValid: true,
                    invalidMessage: ""
                };
                this.setValidationInfo(validationInfo);
            }
        },
        getInputInfo: function(domEl) {
            var selectedTextLength = Terrasoft.utils.dom.getSelectedTextLength(domEl);
            var caretPosition = Terrasoft.utils.dom.getCaretPosition(domEl);
            var value = domEl.value;
            var valueBeforeCaret = "";
            var valueAfterCaret = "";
            var valueSelected = "";
            if (Ext.isIE) {
                valueBeforeCaret = value.slice(0, caretPosition - selectedTextLength);
                valueAfterCaret = value.slice(caretPosition);
                caretPosition -= selectedTextLength;
            } else {
                valueBeforeCaret = value.slice(0, caretPosition);
                valueAfterCaret = value.slice(caretPosition + selectedTextLength);
            }
            if (selectedTextLength > 0) {
                valueSelected = value.slice(caretPosition, selectedTextLength + caretPosition);
            }
            return {
                selectedTextLength: selectedTextLength,
                caretPosition: caretPosition,
                value: value,
                valueBeforeCaret: valueBeforeCaret,
                valueAfterCaret: valueAfterCaret,
                valueSelected: valueSelected
            };
        },
        /**
         * @protected
         */
        onKeyDown: function(e) {
            this.callParent(arguments);
            if (Ext.isEmpty(this.masks)) {
                return;
            }
            var key = e.getKey();
            var matches, masks, placeHolders, commonStr;
            if (key === e.BACKSPACE || key === e.DELETE) {
                e.preventDefault();
                var domEl = e.getTarget();
                var info = this.getInputInfo(domEl);
 
                if (info.valueBeforeCaret === "" && info.valueAfterCaret === "") {
                    this.setDomValue("");
                }
 
                else if (info.selectedTextLength > 0) {
 
                    if (Ext.isEmpty(info.valueAfterCaret)) {
                        this.setDomValue(this.removeEndPlaceHolders(info.valueBeforeCaret));
                    } else {
 
                        matches = this.getMatchesByValue(info.valueBeforeCaret);
                        if (matches.matches.length === 0) {
                            return;
                        }
 
                        masks = this.getPropertyValuesFromArray(matches.matches, "mask");
 
                        placeHolders = this.getPropertyValuesFromArray(masks, "placeHolder");
                        var replaceText = this.getCommonStartString(placeHolders).substr(info.caretPosition, info.selectedTextLength);
                        if (replaceText.length === info.selectedTextLength) {
                            this.setDomValue(info.valueBeforeCaret + replaceText + info.valueAfterCaret);
                        }
                    }
                } else if (key === e.BACKSPACE && !Ext.isEmpty(info.valueBeforeCaret)) {
                    matches = this.getMatchesByValue(info.valueBeforeCaret);
                    if (matches.matches.length === 0) {
                        return;
                    }
 
                    masks = this.getPropertyValuesFromArray(matches.matches, "mask");
 
                    placeHolders = this.getPropertyValuesFromArray(masks, "placeHolder");
                    commonStr = this.getCommonStartString(placeHolders);
                    if (commonStr.length >= info.caretPosition) {
                        this.setDomValueAndCaret(info.valueBeforeCaret.slice(0, -1) + commonStr.substr(info.caretPosition - 1, 1) +
                            info.valueAfterCaret, info.caretPosition - 1);
                    }
                } else if (key === e.DELETE && !Ext.isEmpty(info.valueAfterCaret)) {
 
                    matches = this.getMatchesByValue(info.valueBeforeCaret);
                    if (matches.matches.length === 0) {
                        return;
                    }
 
                    masks = this.getPropertyValuesFromArray(matches.matches, "mask");
 
                    placeHolders = this.getPropertyValuesFromArray(masks, "placeHolder");
                    commonStr = this.getCommonStartString(placeHolders);
                    if (commonStr.length > info.caretPosition) {
                        this.setDomValueAndCaret(info.valueBeforeCaret + commonStr.substr(info.caretPosition, 1) +
                            info.valueAfterCaret.slice(1), info.caretPosition + 1);
                    }
                }
            }
        },
        maskConfig: {
            definitions: {
                //numbers
                "9": {
                    re: "[0-9]"
                },
                //cyryllic
                "к": {
                    re: "[а-яА-ЯёЁ]"
                },
                //латинские
                "l": {
                    re: "[a-zA-Z]"
                },
                //any letter
                "c": {
                    re: "[а-яА-ЯёЁa-zA-Z]"
                },
                //any letter or number
                "#": {
                    re: "[а-яА-ЯёЁA-Za-z0-9]"
                }
            },
            placeHolderChar: "_"
        },
        mask: [],
        /**
         * @protected
         * @overridden
         */
        init: function() {
            this.callParent(arguments);
            this.reSpecChars = [
                "\\", "(", ")", "+"
            ];
            this.addEvents(
                "paste");
            this.on("paste", this.onPaste, this);
            this.setMasks(this.mask);
        },
        /**
         * @protected
         * */
        setMasks: function(value) {
            this.masks = [];
            if (Ext.isEmpty(value)) {
                value = {
                    formats: []
                };
            }
            Terrasoft.each(value.formats, function(format, i) {
                this.masks[i] = this.getMaskByFormat(format);
            }, this);
            this.changeValue(this.value);
        },
        /**
         * {@link Terrasoft.Bindable}.
         * @overridden
         */
        getBindConfig: function() {
            var bindConfig = this.callParent(arguments);
            var multiMaskEditBindConfig = {
                mask: {
                    changeMethod: "setMasks"
                }
            };
            Ext.apply(bindConfig, multiMaskEditBindConfig);
            return bindConfig;
        },
        getMaskByFormat: function(format) {
            var mask = {};
            var matches = [];
            var placeHolderChar;
            var placeHolder = "";
            var def;
            var allRe = "";
 
            if (format) {
                Terrasoft.each(format.split(""), function(c) {
                    def = this.maskConfig.definitions[c];
                    if (def) {
                        allRe += def.re;
                        placeHolderChar = def.placeHolderChar || this.maskConfig.placeHolderChar || "_";
                        matches.push({
                            re: new RegExp(def.re),
                            placeHolderChar: placeHolderChar
                        });
 
                        placeHolder += placeHolderChar;
                    } else {
                        placeHolder += c;
                        matches.push(c);
                        if (this.reSpecChars.indexOf(c) > 0) {
                            allRe += "\\" + c;
                        } else {
                            allRe += c;
                        }
                    }
                }, this);
                mask.placeHolder = placeHolder;
                mask.matches = matches;
                if (allRe !== "") {
                    mask.re = {};
                    mask.re.full = new RegExp("^" + allRe + "$");
                }
            }
            return mask;
        },
        /**
         * @param value
         */
        removeEndPlaceHolders: function(value) {
            if (!Ext.isEmpty(value)) {
                var pos;
 
                for (var i = (value.length - 1); i >= 0; i--) {
 
                    if (value[i] !== this.maskConfig.placeHolderChar) {
                        break;
                    }
                    pos = i;
                }
                if (pos === 0) {
                    value = "";
                } else if (pos) {
                    value = value.slice(0, pos);
                }
            }
            return value;
        },
        /**
         * @param mask
         * @param c
         * @param pos
         * @param textBefore
         * @param textReplaced
         * @param textAfter
         * @param allowAutoFill
         * @returns {*}
         */
        maskValidateByInsChar: function(mask, c, pos, textBefore, textReplaced, textAfter, allowAutoFill) {
            var replacedLength = textReplaced.length;
            if (replacedLength > 0) {
                textAfter = mask.placeHolder.slice(pos, pos + textReplaced.length) + textAfter;
            }
            var value = textBefore + textAfter;
            var maskValidate;
            var match;
            if (!Ext.isEmpty(textAfter)) {
                match = mask.matches[pos];
                if (match && !match.re && mask.matches[pos] === c) {
                    return {
                        value: value,
                        pos: pos,
                        result: this.maskValidateValue(mask, value)
                    };
                }
            }
            value = textBefore + c + textAfter;
            match = mask.matches[pos];
            if (match) {
                if (match.re) {
                    if (textAfter[0] === mask.placeHolder.substr(pos, 1)) {
                        value = textBefore + c + textAfter.substring(1);
                        maskValidate = this.maskValidateValue(mask, value);
                        if (maskValidate.isValid) {
                            return {
                                value: value,
                                pos: pos,
                                result: maskValidate
                            };
                        }
                    }
                }
            }
            maskValidate = this.maskValidateValue(mask, value);
            if (maskValidate.isValid) {
                return {
                    value: value,
                    pos: pos,
                    result: maskValidate
                };
            }
            if (match && !match.re && allowAutoFill && pos < mask.placeHolder.length) {
                var result = this.maskValidateByInsChar(mask, c, pos + 1, textBefore + match,
                    textReplaced, textAfter.substring(1), allowAutoFill);
                if (result) {
                    return result;
                }
                return this.maskValidateByInsChar(mask, c, pos + 1, textBefore + match,
                    textReplaced, textAfter.substring(2), allowAutoFill);
            }
            //}
        },
        /**
         * @param c
         * @param pos
         * @param textBefore
         * @param textAfter
         * @param allowAutoFill
         * @returns {*}
         */
        formatValueByInsChar: function(c, pos, textBefore, textReplaced, textAfter, allowAutoFill) {
            var maskValidation;
            var bestResults = [];
            Terrasoft.each(this.masks, function(item) {
                maskValidation = this.maskValidateByInsChar(item, c, pos, textBefore, textReplaced, textAfter, allowAutoFill);
                if (maskValidation) {
                    maskValidation.mask = item;
                    if (bestResults.length === 0) {
                        bestResults.push(maskValidation);
                    } else if (maskValidation.pos < bestResults[0].pos) {
                        bestResults = [maskValidation];
                    }
                }
            }, this);
            if (bestResults.length > 0) {
                maskValidation = bestResults[0];
 
                var formatValue = this.formatValue(maskValidation.value);
                formatValue.insPos = maskValidation.pos;
                return formatValue;
            }
        },
        /**
         * @param mask
         * @param value
         * @returns {*}
         */
        maskValidateValue: function(mask, value) {
            var match;
            var matchPos = 0;
            if (mask.re.full.test(value)) {
                return {
                    matchPos: value.length,
                    inputPos: value.length,
                    isValid: true,
                    isComplete: true
                };
            }
            var result = {
                matchPos: 0,
                inputPos: 0,
                isValid: true,
                isComplete: false
            };
            value = this.removeEndPlaceHolders(value);
            if (Ext.isEmpty(value)) {
                return result;
            } else {
                Terrasoft.each(value.split(""), function(c, i) {
                    match = mask.matches[i];
                    if (!match) {
                        result = {
                            isValid: false,
                            isComplete: false
                        };
                        return false;
                    } else if (match.re) {
                        if (!match.re.test(c)) {
                            if (match.placeHolderChar === c) {
                                if (!result.inputPos) {
                                    result.inputPos = i;
                                }
                            } else {
                                result = {
                                    isValid: false,
                                    isComplete: false
                                };
                                return false;
                            }
                        }
                    } else if (c !== match) {
                        result = {
                            isValid: false,
                            isComplete: false
                        };
                        return false;
                    }
                    matchPos = i;
                }, this);
                result.matchPos = matchPos;
                if (!result.inputPos) {
                    if (result.isValid) {
                        result.inputPos = result.matchPos + 1;
                    } else {
                        result.inputPos = value.length;
                    }
                }
            }
            return result;
        },
        /**
         * @param value
         * @returns {{matches: Array, matchPos: number, inputPos: number}}
         */
        getMatchesByValue: function(value) {
            var matches = [];
            var minPositions = [];
            var matchPos = 0;
            var inputPos = 0;
            var maskValidation;
            var isComplete = false;
            Terrasoft.each(this.masks, function(mask) {
                maskValidation = this.maskValidateValue(mask, value);
                if (maskValidation.isValid) {
                    var maskMinPos = mask.matches.length;
                    Terrasoft.each(mask.matches, function(match, pos) {
                        if (typeof match === "object" && maskMinPos > pos) {
                            maskMinPos = pos;
                        }
                    });
                    minPositions.push(maskMinPos);
                    if (maskValidation.isComplete) {
                        isComplete = true;
                    }
                    matches.push({
                        mask: mask,
                        validation: maskValidation
                    });
                    if (matchPos < maskValidation.matchPos) {
                        matchPos = maskValidation.matchPos;
                    }
                    if (inputPos < maskValidation.inputPos) {
                        inputPos = maskValidation.inputPos;
                    }
                }
            }, this);
            var minPos = Math.min.apply(0, minPositions);
            return {
                matches: matches,
                matchPos: matchPos,
                inputPos: inputPos,
                minPos: minPos,
                isComplete: isComplete
            };
        },
        /**
         * @param values
         * @returns {*}
         */
        getCommonStartString: function(values) {
            var valuesCount = values.length;
            if (valuesCount === 0) {
                return "";
            } else if (valuesCount === 1) {
                return values[0];
            }
            var commonStr = "";
            var minLen = values[0].length;
            Terrasoft.each(values, function(value) {
                minLen = Math.min(minLen, value.length);
            });
            var isMatch;
            var c;
            for (var i = 0; i < minLen; i++) {
                isMatch = true;
                for (var j = 1; j < valuesCount; j++) {
                    isMatch = values[j][i] === values[j - 1][i];
                    if (!isMatch) {
                        break;
                    }
                    c = values[j][i];
                }
                if (isMatch) {
                    commonStr += c;
                } else {
                    return commonStr;
                }
            }
            return commonStr;
        },
        /**
         * @param a
         * @param name
         * @returns {Array}
         */
        getPropertyValuesFromArray: function(a, name) {
            var result = [];
            Terrasoft.each(a, function(e) {
                result.push(e[name]);
            }, this);
            return result;
        },
        /**
         * @overridden
         * @protected
         */
        initDomEvents: function() {
            this.callParent(arguments);
            var el = this.getEl();
            el.on({
                "paste": {
                    fn: this.onPaste,
                    scope: this
                }
            });
        },
        onBeforePasteFormatValue: Ext.emptyFn,
        onPaste: function(e) {
            if (Ext.isEmpty(this.masks)) {
                return;
            }
            var getSplitText = function(v, p) {
                return {
                    pos: p,
                    before: v.substr(0, p),
                    after: v.substr(p)
                };
            };
            e.preventDefault();
            if (e.browserEvent.clipboardData && e.browserEvent.clipboardData.getData) {
                if (/text\/plain/.test(e.browserEvent.clipboardData.types)) {
                    var clipBoardValue = e.browserEvent.clipboardData.getData("text/plain");
                    clipBoardValue = this.onBeforePasteFormatValue(clipBoardValue) || clipBoardValue;
                    if (Ext.isEmpty(clipBoardValue)) {
                        return;
                    }
                    var domEl = e.getTarget();
                    var info = this.getInputInfo(domEl);
                    var pos = info.caretPosition;
                    var splitText = {
                        before: info.valueBeforeCaret,
                        after: info.valueAfterCaret
                    };
                    var newValue = splitText.before + splitText.after;
                    Terrasoft.each(clipBoardValue.split(""), function(c) {
                        var formatValue = this.formatValueByInsChar(c, pos, splitText.before, "", splitText.after, true);
                        if (formatValue) {
                            newValue = formatValue.value;
                            pos = formatValue.insPos + 1;
                            splitText = getSplitText(newValue, pos);
                        }
                    }, this);
                    domEl.value = newValue;
                }
            }
            return;
        },
        /**
         * @param value
         * @returns {*}
         */
        formatValue: function(value) {
            var newValue = value;
            var placeHolders;
            if (Ext.isEmpty(value)) {
                placeHolders = this.getPropertyValuesFromArray(this.masks, "placeHolder");
                newValue = this.getCommonStartString(placeHolders);
                if (!Ext.isEmpty(newValue)) {
                    return this.formatValue(newValue);
                }
                return {
                    pos: 0,
                    value: "",
                    isComplete: false
                };
            }
            var matches = this.getMatchesByValue(value);
            if (matches.matches.length === 0) {
                if (matches.matchPos > 0) {
                    newValue = value.substr(0, matches.matchPos + 1);
                } else {
 
                    return {
                        pos: 0,
                        value: value,
                        isComplete: false
                    };
                }
                return this.formatValue(newValue);
            }
            var masks = this.getPropertyValuesFromArray(matches.matches, "mask");
            placeHolders = this.getPropertyValuesFromArray(masks, "placeHolder");
            var afterText = this.getCommonStartString(placeHolders).substr(matches.matchPos + 1);
            newValue = value.substr(0, matches.matchPos + 1) + afterText;
            matches = this.getMatchesByValue(newValue);
            return {
                pos: matches.inputPos,
                min: matches.minPos,
                value: newValue,
                isComplete: matches.isComplete
            };
        },
        /**
         * @param value
         * @param caretPosition
         */
        setDomValueAndCaret: function(value, caretPosition) {
            var formatValue = this.formatValue(value);
            if (!this.validationInfo.isValid && formatValue.isComplete) {
                var validationInfo = {
                    isValid: true,
                    invalidMessage: ""
                };
                this.setValidationInfo(validationInfo);
            }
            var el = this.getEl();
            if (el) {
                el.dom.value = formatValue.value;
                caretPosition = caretPosition > formatValue.min ? caretPosition : formatValue.min;
                Terrasoft.utils.dom.setCaretPosition(el.dom, caretPosition);
            }
        },
        /**
         * @param {String} value
         * @protected
         * @virtual
         */
        setDomValue: function(value) {
            this.setDomValueAndCaret(value);
        },
        /**
         * @protected
         * @param  {String} value
         * @return {Boolean}
         */
        changeValue: function(value) {
            if (!Ext.isEmpty(this.masks)) {
                var formatValue = this.formatValue(value);
                if (formatValue.value === this.formatValue(null).value) {
                    value = null;
                    formatValue.isComplete = true;
                    var el = this.getEl();
                    if (el) {
                        el.dom.value = "";
                    }
                }
                var validationInfo = this.getValidationInfo(formatValue);
                this.setValidationInfo(validationInfo);
            }
            return this.callParent(arguments);
        }
    });
});

Используем этот модуль для колонки телефона:

define("ContactPageV2", ["MultiMaskEdit"], function() {
	return {
		entitySchemaName: "Contact",
		attributes: {},
		modules: /**SCHEMA_MODULES*/{}/**SCHEMA_MODULES*/,
		details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
		businessRules: /**SCHEMA_BUSINESS_RULES*/{}/**SCHEMA_BUSINESS_RULES*/,
		methods: {},
		dataModels: /**SCHEMA_DATA_MODELS*/{}/**SCHEMA_DATA_MODELS*/,
		diff: /**SCHEMA_DIFF*/[
			{
                "operation": "merge",
                "name": "MobilePhone",
                "values": {
                    "controlConfig": {
                        "className": "Terrasoft.controls.MultiMaskEdit",
                        "mask": {
                            "formats": ["(99)999-99-99"]
                        }
                    }
                }
            }
		]/**SCHEMA_DIFF*/
	};
});

Должен заметить, что деталь Средства связи не совсем обычная. В ней присутствует много дополнительной логики, в связи с чем реализация вашей задачи может быть слишком трудозатратной на данный момент времени.

Показать все комментарии

Добрый день! Пытаюсь реализовать маску ввода телефона при помощи jQuery и InputMask, т.к. MultiMaskEdit некорректно отрабатывает на смартфонах Android. Подключил клиентские модули с кодом библиотек. Вне Creatio данные библиотеки проверены и работают. В Creatio же получаю следующую ошибку: Uncaught TypeError: $(...).inputmask is not a function

Использую следующий код:

define("HbkNewTrustNumberPage", ["HbkjQuery","HbkInputMask"], function() {
	$(document).ready(function() {
		$("#HbkNewTrustNumberPageHbkNewTrustNumberTextEdit-el").inputmask("+\\9\\96 999999999");
	});
	return {
		entitySchemaName: "",
		attributes: {},
		modules: /**SCHEMA_MODULES*/{}/**SCHEMA_MODULES*/,
		details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
		businessRules: /**SCHEMA_BUSINESS_RULES*/{}/**SCHEMA_BUSINESS_RULES*/



 

Нравится

3 комментария

Здраствуйте, рекомендую для реализации валидации поля воспользоваться инструкцией по ссылке:https://academy.terrasoft.ru/docs/developer/interface_elements/page/pol…

Алёна Доля,

Добрый день! Валидация и маска ввода, это немного разные вещи. Меня интересует конкретно маска ввода.

Шарафутдинов Фаиль Русланович,

Здраствуйте, в таком случае реализацию рекомендую рассмотреть через DOMNodeInserted.

Добавить метод, в котором будет указываться маска для поля, и добавить его вызов в Init, например:

    setPhoneMask: function(that) {

                            $(document).bind("DOMNodeInserted", function(e) {

                        if ( $("#HbkNewTrustNumberPageHbkNewTrustNumberTextEdit-el")) {

                        $("#HbkNewTrustNumberPageHbkNewTrustNumberTextEdit-el").on("focus", function() {

                        $("#HbkNewTrustNumberPageHbkNewTrustNumberTextEdit-el").mask("+7(999)999-99-99", { autoclear: false, placeholder: "_" });

                          });

                        $(document).unbind("DOMNodeInserted");                      

                        }

                    });

                },

 

Показать все комментарии

Добрый день! Подскажите, пожалуйста, реализовали маску ввода номера телефона. На ПК все отображается корректно, а через браузер на Android маска отрабатывает некорректно, например

ПК: +996 999999999

Android: +996 999999999_________

То есть маска сдвигается, вместо того, чтобы в нее записывался номер

Использовали следующий код:

define("ScNewTrustNumberPage", ["MultiMaskEdit"], function() {
	return {
		entitySchemaName: "",
		modules: /**SCHEMA_MODULES*/{}/**SCHEMA_MODULES*/,
		details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
		businessRules: /**SCHEMA_BUSINESS_RULES*/{}/**SCHEMA_BUSINESS_RULES*/,
		methods: 
		{
			getPhoneMask: function() {
				return {
					formats: ["+996 000000000"]
				}
			}
		},
		dataModels: /**SCHEMA_DATA_MODELS*/{}/**SCHEMA_DATA_MODELS*/,
		diff: /**SCHEMA_DIFF*/[
			{
				"operation" : "merge",
				"name" : "ScNewTrustNumber",
				"values" : {
					"controlConfig" : {
						"className": "Terrasoft.MultiMaskEdit",
							"mask": {
								"bindTo": "getPhoneMask"
							},
						"maskConfig": {
							"definitions": {
								"0": {
									"re": "[0-9]"
								}
							}
						}
					}
				}
			},
			]/**SCHEMA_DIFF*/
	};
});

 

Нравится

3 комментария

Здраствуйте, для решения рекомендую воспользоваться методом добавления валидации для текстового поля описанным в статье.

Алёна Доля,

Добрый день!

В данной статье описана валидация поля. Мне же необходимо реализовать маску ввода. Что-то вроде такого:

Шарафутдинов Фаиль Русланович,

Для реализации следуйте решению, которое обсудили с вами в обсуждении по ссылке: 

https://community.terrasoft.ru/questions/maska-vvoda-jquery-inputmask#c…

А именно реализовать маску с помощью jQuery.

Показать все комментарии

При открытии мини-карточки раздела и запуска маски, она не блокирует поля мини-карточки, так как находится за ней. Как сделать что бы мини-карточка закрывалась маской во время ее запуска?

Нравится

5 комментариев
Лучший ответ

Если "копнуть" и посмотреть, как работает ShowBodyMask, то можно увидеть, что маска применяется к элементу, переданному в конфиге. Если таковой не указан, то к body. Потому для решения Вашей задачи достаточно примерно такой конструкции:

this.showBodyMask({
	selector: "#MiniPageContentContainer"
});

 

Добрый день, Александр!

Опишите, пожалуйста, более детально (возможно на скриншотах или видео) как воспроизводится кейс, который Вы хотите обойти.

ч 

Жмурко Сергей Николаевич,

Есть мини карточка, есть вызов сервиса и ожидание его ответа

. Пока ожидаем, нужно заблокировать карточку от изменений (как это делаем в обычных карточках "MaskHelper.ShowBodyMask()"). Но при вызове "MaskHelper.ShowBodyMask()" блокировку и затенение получаем за миникарточкой а не поверх нее.

Если "копнуть" и посмотреть, как работает ShowBodyMask, то можно увидеть, что маска применяется к элементу, переданному в конфиге. Если таковой не указан, то к body. Потому для решения Вашей задачи достаточно примерно такой конструкции:

this.showBodyMask({
	selector: "#MiniPageContentContainer"
});

 

Если нужно заблокировать и кнопки, то id будет уже AlignableMiniPageContainer

Лопатин Константин,

спасибо большое. В принципе так и пробовал, но упустил что нежно еще слово "Container"

Показать все комментарии

Добрый день!

Возникла следующая задача: в рамках одного большого БП вызываются несколько процессов поменьше. При этом часть из них с преднастроенными страницами, т.е. предполагают действия пользователя, другая без них, т.е. пользователь ничего не делает, просто ждет их выполнения в фоне. Возник вопрос: можно ли повесить какую-то маску на экран, во время выполнения этих процессов, чтобы пользователь перед открытием преднастроенной страницы в следующем по очереди БП обязательно дождался завершения фоновых процессов и не смог никуда перейти?

Нравится

4 комментария
Лучший ответ

нет, точнее так:

1. Если запускаете из пользовательского интерфейса - там только на запуск, нельзя отследить окончание выполнения.

2. Если есть преднастроенные страницы (кастомные), то можно в них последовательно включать и выключать маску.

3. Никто не помешает пользователю нажать рефреш :)

нет, точнее так:

1. Если запускаете из пользовательского интерфейса - там только на запуск, нельзя отследить окончание выполнения.

2. Если есть преднастроенные страницы (кастомные), то можно в них последовательно включать и выключать маску.

3. Никто не помешает пользователю нажать рефреш :)

Дмитрий Степанов,

Дмитрий, добрый день!

Спасибо за предложенные варианты.

Мне не совсем они подходят, возможно я не совсем точно описал кейс.

Кейс состоит в том, что:

последовательно выполняются три подпроцесса:

1) Первый заканчивается

преднастроенной страницей, далее идет переход во 2-й подпроцесс

2) Второй подпроцесс без страниц, и он выполняется достаточно долго(порядка 10 сек). В это время отображается единое окно и пользователь может быть сбит с толку.

3) После выполнения 2-го процесса запускается 3-й процесс с преднастроенной страницей. 



Вопрос в том, чтобы как-то залочить экран пользователя, чтобы перед поднятием страницы в 3-м процессе он во время временного окна никуда не перешел из единого окна.

Подозреваю, что полностью оградить от действий пользователя никак не получится, ведь он всегда сможет открыть второй браузер или анонимное окно. Разве что банить на несколько минут.

В описанном примере можно попробовать так: одновременно с запуском длительного фонового процесса показать ещё одну преднастроенную страницу без всяких элементов управления, но с поясняющей надписью или картинкой, а логику её закрытия реализовать путём отправки из процесса сообщения по Websocket.

 

Зверев Александр,

Александр, спасибо за идею. Похоже на самый реалистичный вариант.

Показать все комментарии

Здравствуйте, подскажите, пожалуйста, как реализовать маску только для отображения значения в поле.

Известный модуль MultiMaskEdit позволяет реализовать маску, но значение в базу данных записывает в таком же виде. Если при сохранении очистить значение от ненужных символов, то при последующей загрузке значение не отображается, т.к. не соответствует маске. Также не отображаются частичные значения.
Например при маске +7(999) 999-99-99 и значении +7(999) 123-34-5 мы не увидим значения.

Нравится

4 комментария

Смотрел, с этих тем и начал. Проблема подробно описана в первом посте. Маска нужна только для отображения, но не для записи в базу.

Хардкод-решение. Сделать два поля, одно — номер с символами, другое — только цифры. Маску привязать к первому полю. Второе заполнять программно при изменении первого (при помощи БП или триггера в БД).

Александр, спасибо, пока примерно так и работает. Думал, может есть какое-то красивое решение.

Показать все комментарии

Добрый день!
Подскажите пожалуйста, есть ли возможность реализовать для версии 5.4, ввод телефона по фиксированной маске, например: +7 (___) _______ ?

Нравится

2 комментария

Да, такая возможность есть (см. в конце статьи).

Спасибо, ценный материал!

Показать все комментарии

Коллеги. доброго вечера!
Каким образом можно изменить маску ввода E-mail в детали "Средства связи контрагента"? Проблема в том, что она сейчас не принимает адрес в домене *.company - в маске стоит ограничение на 4 символа в строке после точки (а нужно 7)

Нравится

10 комментариев

В общем и целом расписано здесь (см. пример 2)

Но нужно сказать, что у нас на версии 7.5 этот пример оказался некорректен в плане переопределения метода addItem, так как он не возвращает никаких item. Поэтому пришлось его полностью скопипастить из родительской BaseCommunicationDetail и заменить строчку

this.addColumnValidator("Number", newItem.validateField, newItem);

на

this.addColumnValidator("Number", this.validateCommunicationFormat, newItem);

Ну и, конечно, определить метод validateCommunicationFormat, в котором проверять в зависимости от типа средства связи по регэкспу формат и возвращать объект с invalidMessage и fullInvalidMessage.

Андрей, большое спасибо, всё получилось!

{
                validateEmailFormat: function (value) {
                    var invalidMessage = "";
                    var isValid = true;
                    var communicationType = this.get("CommunicationType");
                    var number = value || this.get("Number");
                    // Проверка введенного E-mail на соответствие маске ввода.
                    if (communicationType.value == "ee1c85c3-cfcb-df11-9b2a-001d60e938c6") {	// E-mail
                        isValid = (Ext.isEmpty(number) || new RegExp("^[0-9a-z_]+@[0-9a-z_]+\.[a-z]{2,10}$").test(number));
                        if (!isValid) {
                            invalidMessage = "Укажите E-mail по формату";
                        }
                    }
                    return {
                        fullInvalidMessage: invalidMessage,
                        invalidMessage: invalidMessage
                    };
}

Замечательно. Наверное стоит еще добавить дефис в список символов допустимых в E-mail. Только нужно добавлять его либо самым последним перед ], либо первым - сразу после [

ещё вопрос возник - как заставить код принимать русские символы в e-mail? Например, для info@сайт.рф. Вариант ^[0-9a-z_-\.]+@[0-9a-zа-яё_-\.]+\.[a-zа-яё]{2,10}$ почему-то не срабатывает

Здравствуйте, Антон!

Ваш вариант не будет работать.
Корректной маской будет:

var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA--ЯА-Я0-9.-]+\.[a-zA--яА-Я]{2,10}$/;

Алексей, предложенный Вами вариант тоже не сработал. Может быть, для работы с кириллицей что-то дополнительно подключить нужно?

Несколько уточняющих уточняющих вопросов:
1) Вы замещали EmailHelper?
2) После замещения EmailHelper Вы скопировали весь код из материнской схемы и заменили одну строку определения параметра emailPattern?
3) После сохранения схемы необходимо очистить кэш браузера. Вы это сделали?

1. Замещал BaseCommunicationDetail
2. -
3. -

Тогда:
1) Заместите EmailHelper. В замещающую схему вставьте следующий код:

define('EmailHelper', ['ext-base', 'terrasoft', 'EmailHelperResources', 'ConfigurationConstants', 'MaskHelper'],
	function(Ext, Terrasoft, resources, ConfigurationConstants, MaskHelper) {
 
		function isEmailAddress(emailAddress) {
			var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA--яА-Я0-9.-]+\.[a-zA--яА-Я]{2,9}$/;
			return emailPattern.test(emailAddress);
		}
 
		function getEmailUrl(emailAddress) {
			if (isEmailAddress(emailAddress)) {
				return 'mailto:' + emailAddress;
			}
			return '';
		}
 
		function onEmailUrlClick(emailAddress) {
			var url = getEmailUrl(emailAddress);
			if (!Ext.isEmpty(url)) {
				var win = window.open(url, '', 'height=1,width=1');
				setTimeout(function() {
					win.close();
				}, 1000);
			}
		}
 
		return {
			isEmailAddress: isEmailAddress,
			getEmailUrl: getEmailUrl,
			onEmailUrlClick: onEmailUrlClick
		};
	});

2) Очистите кэш.

В результате Вы сможете создавать средства связи с типом Email с кириллическими символами в домене (например *.почта.рф) , а также с длиной домена в 9 символов (например, *.travel)

Алексей, работает, спасибо!

Показать все комментарии

Добрый день. Необходимо в bpmonline 7.5 на детали "Средства связи" в контактах, по аналогии, сделать как здесь https://community.terrasoft.ru/questions/vvod-polya-po-maske. Но проблема в том, что эти поля добавляются динамически. Не подскажите в каком направлении двигаться?

Нравится

7 комментариев

Приложил обновленный контрол и инструкцию.
maski_vvoda.rar

Андрей, спасибо за помощь.

"Андрей Каспаревич" написал:

Приложил обновленный контрол и инструкцию.

maski_vvoda.rar

Андрей, здравствуйте!

Возможно, существует новая версия этого контрола? Обнаружился ряд проблем на версии 7.9, в частности при установке маски на деталь Средств связи не работает добавление Facebook.

Есть проблема с интеграцией - например, в контакте вводим номер мобильного телефона, на детали создаётся новый номер, но он пуст.

Может быть, подскажете, что можно сделать для решения этих проблем, в какую сторону смотреть? В остальном контрол очень удобный.

"Смородинов Денис" написал:Возможно, существует новая версия этого контрола?

Новой версии к сожалению нет. Но вы можете доработать текущую самостоятельно.

Переработал существующую.

На всякий случай: из схемы BaseCommunicationDetail в инструкции из архива удалил переопределение метода addItem. В этом случае синхронизация и подключение соцсетей работает как надо. Версия 7.9 sales.

Переработал существующую.

На всякий случай: из схемы BaseCommunicationDetail в инструкции из архива удалил переопределение метода addItem. В этом случае синхронизация и подключение соцсетей работает как надо. Версия 7.9 sales.

Ссылка не работает

Показать все комментарии