Стандартная маскаМаска с автоматическим выбором страныКак у поля номер телефона на мобильных показывать только цифры в клавиатуре?
Важно! Скрипт работает корректно, если выбран тип поля формы "Телефон".
Результат установки необходимо проверять на опубликованной странице.
Стандартная маска
Вариант 1
Перейдите в раздел "Плагины"
Выберите из списка плагин Маска ввода телефона, задайте имя и нажмите Сохранить
Вариант 2
Чтобы добавить скрипт, перейдите в раздел "Плагины"
Выберите плагин Свой код
Код добавляете в поле Код перед </body>
Код для добавления
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.min.js"></script>
<script type="text/javascript">
jQuery.browser = {};
(function () {
jQuery.browser.msie = false
jQuery.browser.version = 0;
if (navigator.userAgent.match(/MSIE ([0-9]+)\\./)) {
jQuery.browser.msie = true;
jQuery.browser.version = RegExp.$1
}
})();
</script>
<script>
cr.api(page => {
const errorTitle = 'Ошибка' /* Заголовок сообщения об ошибке */
const errorText = 'Неправильно указан номер телефона' /* Текст сообщения об ошибке */
const characters = 10 /* Минимальное количество цифр в номере телефона */
const template = '+7 (000) 000-00-00'
const startContent = '+7'
$.jMaskGlobals = {}
$.jMaskGlobals.maskElements = 'input'
$.jMaskGlobals.translation = {
"0": { pattern: /\d/ },
"+": { pattern: /\+/, optional: true }
}
page.waitForAppear('[cr-field="phone"]', field => {
const namePosition = getProp(field.querySelector('.name'), 'position')
const input = field.querySelector('input')
if (namePosition == 'static') setMask(input)
else input.addEventListener('focus', () => setMask(input))
input.addEventListener('input', () => {
if (!input.value) return setMask(input)
input.value = input.value.replace(/(\+7\s?\(?)(\+?7|8)/, '$1')
setStartContent(input)
})
})
page.on('before-form-submit', event => {
const apiPhoneFields = event.form.fields.filter(apiField => {
return apiField.type == 'phone'
})
apiPhoneFields.forEach(apiField => {
const phoneNumber = apiField.value.replace(/\D/g, '')
if (phoneNumber.length < characters) {
page.showErrorMessage(errorTitle, errorText)
event.prevent()
}
})
})
function setMask(input) {
if (!input) return
$(input).mask(template, { selectOnFocus: false })
setStartContent(input)
}
function setStartContent(input) {
if (!input) return
const value = input.value ? input.value : ''
if (!value.startsWith(startContent)) {
input.value = startContent + value
}
}
function getProp(el, prop) {
if (!el || !prop) return
return getComputedStyle(el, null).getPropertyValue(prop)
}
})
</script>Результат можно посмотреть на опубликованной странице, пример: https://examples.creatium.site/mask
Маска с автоматическим выбором страны
Как добавить?
Чтобы добавить скрипт, перейдите в раздел "Плагины"
Выберите плагин “Свой код”
Код добавляете в поле Код перед </body>
Код для добавления
<link rel = "stylesheet"href = "https://neremaitea.github.io/intltelplp/intlTelInput.css" >
<script src = "https://neremaitea.github.io/intltelplp/intlnew.js" > </script>
<script>
cr.api(page => {
page.waitForAppear('[cr-field="phone"]', field => {
$('.area .metahtml').css('z-index', 'auto')
var defstr = "ru" // страна по умолчанию, если не удалось ее определить
$.ajax({
url: '//ipinfo.io',
method: 'get',
dataType: 'json',
success: function (r) {
str = r.country.toLowerCase()
},
error: function () {
str = defstr
},
complete: function () {
$('div[data-type=phone] input, div[plp-field=phone] input, div[cr-field="phone"] input').intlTelInput({
defaultCountry: str
})
}
});
})
})
</script>Как у поля номер телефона на мобильных показывать только цифры в клавиатуре?
У поля номер телефона нужно нажать на гаечный ключ - расширения - js и добавить следующий код:
let field = el.querySelector('[cr-field="phone"] input')
field.setAttribute('pattern',"[0-9]*")
field.setAttribute('inputmode',"numeric")
