How to add a input mask on any checkout field?

Question

I've been searching for a way to adds masks in some checkout input fields, I found this, but without answers, I want to add pt_BR mask on the telephone field.

Is there some way to use Jquery Mask Plugin, or something like, on Magento 2 checkout fields?

Thanks in advance.

Answer 1

I'm using Piszczek_InputMask package for address inputs, like this postcode:

<item name="postcode" xsi:type="array">
<!-- post-code field has custom UI component -->
<item name="component" xsi:type="string">Magento_Ui/js/form/element/post-code</item>
<item name="validation" xsi:type="array">
    <item name="required-entry" xsi:type="string">true</item>
    <item name="validate-zip-br" xsi:type="string">true</item>
</item>
<!-- <item name="validation" xsi:type="array">
    <item name="validate-zip-br" xsi:type="string">true</item>
</item> -->
<item name="config" xsi:type="array">
    <!-- Assigning a new template -->
    <item name="inputMask" xsi:type="array">
        <!-- pass your simple mask here-->
        <item name="mask" xsi:type="string">00000-000</item>
    </item>
</item>
<item name="sortOrder" xsi:type="string">69</item>

Or telephone input example:

<item name="telephone" xsi:type="array">
<item name="sortOrder" xsi:type="string">66</item>
<item name="config" xsi:type="array">
    <item name="tooltip" xsi:type="array">
        <item name="description" xsi:type="string" translate="true">For delivery questions.</item>
    </item>
    <item name="inputMask" xsi:type="array">
        <!-- pass your simple mask here-->
        <item name="mask" xsi:type="string">(00) 00000-0000</item>
    </item>
</item>

https://github.com/piszczek/magento2-input-mask

But I can't remember if I did some change on this package to work on frontend.