Маска
поле ввода
Технические вопросы
7.x

Ввод поля по маске

Добрый день,
Подскажите как можно реализовать ввод телефона по маске +7 (ххх) ххххххх?
Версия 7.4

Нравится

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

Здравствуйте, Олег!

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

Олег, во вложении документик, посмотрите.

Дмитрий, это совсем не то, что требовалось. В документе описана блокировка интерфейса, а реализовать необходимо маску для ввода, вроде подобной, но в данном примере используется подключаемый скрипт на jquery.
маска ввода телефона
Вот пример того что необходимо получить

Олег, понял спасибо. Есть примерчик для фиксированной маски (т.е. нет возможности изменять на лету, к примеру с маски для рос. телефона на маску для укр. телефона). Если интересует - ближе к вечеру могу скинуть.

Дмитрий, как раз фиксированная и нужна, спасибо, буду ждать

Дмитрий?

Да, я тут, извиняюсь.

Во вложении контрол позволяющий вводить текст по массиву масок.

Чтобы его использовать необходимо добавить этот модуль в dependency страницы и в секцию define, а в diff поля указать, что необходимо использовать класс MultiMaskEdit и его маску:
[javascript]
{
"operation": "merge",
"name": "MobilePhone",
"values": {
"controlConfig": {
className: "Terrasoft.controls.MultiMaskEdit",
mask: {
formats: ["+7(999)999-99-99", "+380(99)999-99-99"]
},
onBeforePasteFormatValue: TSCCommon.getDigitsFromString
}
}
}
[/javascript]
Метод onBeforePasteFormatValue указываете, если хотите обработать значения перед вставкой из буфера обмена в контрол. Этот метод необязательный – контрол вставит только допустимые значения, но, например, если предварительно обработать вставляемую строку и оставить только цифры - то для маски выше телефон вставиться полностью, независимо от того какие символы использовались дополнительно.
По умолчанию в качестве символов подстановки в шаблонах маски используются:
[javascript]
{
//цифры
"9": {
re: "[0-9]"
},
//кириллица
"к": {
re: "[а-яА-ЯёЁ]"
},
//латинские
"l": {
re: "[a-zA-Z]"
},
//любая буква
"c": {
re: "[а-яА-ЯёЁa-zA-Z]"
},
//любая буква или цифра
"#": {
re: "[а-яА-ЯёЁA-Za-z0-9]"
}
}
[/javascript]

Вы можете задать собственный символ для шаблон ввода с помощью maskConfig, например, если вам нужна 9-ка как обычный символ, то можно указать что для подстановки цифр использовать «0». В re мы указываем регулярное выражение для проверки. Также необходимо указать символ заменяющие пустые значение в параметре placeHolderChar.
Например, так можно задать маску позволяющая вводить книжные коды (ISBN), где 978 это просто цифры, а «0» - подстановочный символ:
[javascript]
{
className: 'Terrasoft.controls.MultiMaskEdit',
value: {
bindTo: 'ISBN'
},
mask: {
formats: ["978-0-000-00000-0"]
},
maskConfig: {
definitions: {
//цифры
"0": {
re: "[0-9]"
},
placeHolderChar: "_"
}
}
}
[/javascript]

Известная проблема – валидация контрола не передается в модель карточки, т.е. хотя контрол показывает что значение не верно, карточка все равно сохраняется. Пока что надо делать дополнительные проверки в карточке руками.

Спасибо

Дмитрий подскажите, не смог разобраться, как подключить Terrasoft.controls.MultiMaskEdit во вложении, чтобы его можно было добавить в dependencies и define?
Пробовал создать модуль, в него перенести код из вложения, подключил его в dependencies, объявил в define, но получаю следующую ошибку

GET http://*********/0/Nui/Terrasoft/controls/MultiMaskEdit.js?_dc=1416552545493 404 (Not Found)

Олег, к сожалению, не я автор данного контрола и сам не пробовал его реализовать (однако видел уже готовый пример по инструкции выше). Может быть проблема в пакете, в который вы добавили данный модуль? Прописаны ли в нём все зависимости?
Проверьте, пожалуйста, если не поможет - вынужден попросить Вас подождать с ответом, задам ваш вопрос автору, как только он вернется из заслуженного отпуска :)

Разобрался, объявил вложенный контрол как MultiMaskEdit вместо Terrasoft.controls.MultiMaskEdit и использовал уже короткое название, отлично работает. Спасибо

Добрый день!
Подскажите как использовать маску для телефона в зависимости от значения другого поля (например от страны)?

Самый простой вариант - использовать несколько контроллов с разными масками, и показывать в определенный момент нужный, а остальные скрывать. Иначе - нужно экспериментировать, переписывать исходный код - на это времени, к сожалению, в данный момент нет.

Спасибо, Дмитрий, большое!
Подсказали в каком направлении двигаться.

Контрол обновлен. В приложении описание и исходники.
maski_vvoda.rar

Добрый день!
Подскажите, пожалуйста как изменить контрол, так чтобы можно было вводить только латинские символы, но без их фиксированного количества, т.е. как в TextEdit.
Заранее спасибо.

Александр, вместо

[javascript]
//цифры
"0": {
re: "[0-9]"
},
[/javascript]

прописываете:

[javascript]
"l": {
re: "[a-zA-Z]"
},
[/javascript]

Андрей Каспаревич пишет:

Контрол обновлен. В приложении описание и исходники.

maski_vvoda.rar

Андрей, а посвежее версии нет случаем?

Основное что тут не очень хорошо смотрится, это когда для редактирования еще пустого поля с маской кликаем в середину поля и попадаем для редактирования некрасиво в середину пустого шаблона...

 Сылки на вложения не работают

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