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

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

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

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

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

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

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

[...]

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. В этот файл помещаем следующий код:

document.addEventListener('DOMContentLoaded', () => {
    Inputmask().mask(document.querySelectorAll("input"));
});

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

phone:
    label: Телефон
    type: text
    attributes:
        data-inputmask: "'mask': '(999) 999-99-99'"