How to add input masks to the backend

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/myplugin/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.myplugin::lang.test.phone'
    type: text
    attributes:
        data-inputmask: "'mask': '999 999 99 99'"

Posted in OctoberCMS on Nov 07, 2017