Technical notes about OctoberCMS a Laravel CMS. Notes are written by inetis team, a Swiss webagency

<- Back

How to add input masks to the backend

Posted on by

jquery.inputmask is a jQuery plugin which create an input mask. An inputmask helps the user with the input by ensuring a predefined format. Follow this tutorial

Download the js Library from https://github.com/RobinHerbots/jquery.inputmask and copy it to the asset directory of your plugin. plugins/inetis/myplugin/assets/js/jquery.inputmask.bundle.js

Add the library to the controller

[...]
class Houses extends Controller
{

public function __construct()
    {
        parent::__construct();
$this->addJs(url('plugins/inetis/chequeemploi/assets/js/jquery.inputmask.bundle.js'));
}
}

in the main js file of your plugin add:

$(document).ready(function(){
    Inputmask().mask(document.querySelectorAll("input"));
});

and the magic in your fields.yaml file

phone:
    label: 'inetis.chequeemploi::lang.test.phone'
    type: text
    attributes:
        data-inputmask: "'mask': '999 999 99 99'"