input для ввода номера телефона в бэкенде

Инструкция как в бэкенде Winter CMS сделать в форме input-поле с маской для ввода номера телефона с помощью javascript библиотеки Inputmask.

input для ввода номера телефона в бэкенде

Маска ввода - это шаблон для ввода данных в HTML-элементе input. Маска ввода помогает пользователю с вводом, обеспечивая предопределенный формат. Это могут быть телефонные номера, числа, календарные даты и т.д.

В этой записе будет показано как сделать маску для поля ввода номера телефона в форме бэкенда Winter CMS. При установке курсора в инпут будет отображаться шаблон для ввода:

шаблон ввода номера телефона

С введёнными данными инпут будет отображаться вот так:

поле ввода номера телефона

Для реализации данного функционала будем использовать javascript-библиотеку Inputmask, которая собственно и создает маску ввода. Inputmask может работать с чистым javascript, так и с jQuery и jqlite.

Скачайте Inputmask https://github.com/RobinHerbots/Inputmask и поместите в папку assets/js вашего плагина.

Подключаем библиотеку в контроллере:

plugins/myauthor/myplugin/controllers/Items.php
[...]

class Items extends Controller
{
    public function __construct() {
        parent::__construct();

        $this->addJs('/plugins/myauthor/myplugin/assets/js/inputmask.min.js');
        $this->addJs('/plugins/myauthor/myplugin/assets/js/script-mask.js');
    }
}

Вместе с библиотекой мы подключили файл script-mask.js, в котором будет настройка для inputmask. В этот файл помещаем следующий код:

plugins/myauthor/myplugin/assets/js/script-mask.js
document.addEventListener('DOMContentLoaded', () => {
    Inputmask().mask(document.querySelectorAll("input"));
});

И в файле определения полей добавляем поле для ввода номера телефона:

plugins/myauthor/myplugin/models/item/fields.yaml
phone:
    label: Телефон
    type: text
    attributes:
        data-inputmask: "'mask': '(999) 999-99-99'"
Записи по теме
Как получить массив из id моделей
массив id Появилась такая задача: нужно получить массив из id последних 10 записей на сайте написанном на Winter CMS. Признаюсь что пришлось потратить какое то время для её решения.
Обязательные поля в Winter CMS
Обязательные поля в Winter CMS Как в Winter CMS сделать поля модели обязательными для заполнения, чтобы система сама проверяла их заполненность перед сохранением экземпляра модели.
Русский язык для даты в Winter CMS
Русский язык для даты в Winter CMS Как в Winter CMS включить русский язык для выводимых на фронтенд дат. Если у вас в Winter CMS время и дата отображаются на английском языке, то значит что в настройках вы не меняли локализацию (язык) для фронтальной части сайта.
Комментарии 0

*** чтобы писать комментарии.