Input mask on text region

JordinB · Feb 8th 2019

Hi,

Is there a way to specify an input mask on a text field to be rendered within the Perch cms ? I'm searching the docs, but haven't run across anything. What i would like to do is to have a text region available that would limit the input to something like: AA9999 so that the editor could only enter a 2 uppercase letters followed by 4 numbers to help define a standardized input on the field.

If it's not possible out of the box, is there a way I could implement it through a custom app ?

Thanks.

ryan · Feb 8th 2019

Hey Jordin,

Could you use the native pattern attribute?

https://html.com/attributes/input-pattern/

JordinB · Feb 8th 2019

Seems like pretty much any attribute i add gets stripped out when Perch renders the input so :

Code

<perch:content id="registrationSession" label="Session" type="text" help="Exemple: HH2019 pour l'hiver 2019" data-test-attr="test123" class="test-class" pattern="[A-Z]{2}[0-9]{4}" />

renders:

Code

<input type="text" id="perch_18_registrationSession" name="perch_18_registrationSession" value="" class="text m input-simple">

ryan · Feb 8th 2019

Ah, then that's a good feature request! Them input patterns are so handy.

JordinB · Feb 8th 2019

If i created a custom field type maybe ?

JordinB · Feb 8th 2019

So I created a new field type called maskedinput which basically just overrides the text fieldtype render_inputs function to allow the "pattern" attribute to be copied over.

Not ideal, because it doesn't inform the user what the pattern is. But it works. I'll maybe spend some more time another time to get a more refined solution.

hus_hmd · Feb 9th 2019

Quote from JordinB

Not ideal, because it doesn't inform the user what the pattern is.

You can use the help attribute to add some instructions/tips for the editors.

JordinB · Feb 11th 2019

hus_hmd - yes that will help somewhat but it’s not as good as having instant feedback while entering the text. What I was hoping to accomplish it to be able to use something like : https://unmanner.github.io/imaskjs/

hus_hmd · Feb 11th 2019

You can add page resources (e.g. Javascript, CSS) wherever your custom field type is used by adding the add_page_resources() function to your class.

I'd probably load the JS library as well as a custom script to apply the mask to the fields based on attributes on the <input>:

PHP

public function add_page_resources() {
$Perch = Perch::fetch();
$Perch->add_javascript(PERCH_LOGINPATH . "/addons/fieldtypes/maskedinput/assets/vendor/imask.js");
$Perch->add_javascript(PERCH_LOGINPATH . "/addons/fieldtypes/maskedinput/assets/js/app.js");
}

Assuming your <input> is something like this:

HTML

<input type="text" data-masked-input="+{7}(000)000-00-00">

You can apply the masks like so:

JavaScript

var maskedInputs = document.querySelectorAll('[data-masked-input]');
maskedInputs.forEach(element => {
var maskOptions = {
mask: element.dataset.maskedInput
};
var mask = new IMask(element, maskOptions);
});

JordinB · Feb 12th 2019

hus_hmd - Thanks for pointing out the add_page_resources() function, that will help accomplish what I want.

Thanks for your help