LucasCalazans
5/11/2018 - 6:05 PM
Add masks to input fields
Magento - KnockoutJS (Add masks to all fields in the store)
// Examples
<input type="number" name="number" data-bind="mask: '#'"/> <!-- Only numbers (useful to IE) -->
<input type="text" name="postcode" data-bind="mask: '99999-999'"/>
<input type="text" name="telephone" data-bind="mask: '(99) 9 9999-99999'"/>// theme-folder/requirejs-config.js
// or
// module-folder/view/frontend/requirejs-config.js
var config = {
shim: {
"jquery/mask": ["jquery"]
},
paths: {
'jquery/mask': 'js/lib/jquery.mask.min' // Add this file to your module/theme
}
};
<script type="application/javascript">
// This is here to apply the mask handler to the phtml files
// Related with process order, external JS will load after the file is completely loaded, missing the Knockout process
require([
'ko',
'jquery',
'jquery/mask'
], function(ko, $) {
ko.bindingHandlers.mask = {
init: function(element, valueAccessor) {
var mask = (typeof valueAccessor === 'function') ? valueAccessor() : null;
if(!mask) return false;
element.value = element.value.replace(/\D*/gm, '');
$(element).mask(valueAccessor());
return true;
}
};
return true;
});
</script><!-- OPTIONAL - Use this file just to add this mask behavior to checkout fields (Like address form) -->
<!-- theme-folder/Magento_Ui/web/templates/form/element/input.html -->
<input class="input-text" type="text" data-bind="
value: value,
valueUpdate: 'keyup',
hasFocus: focused,
mask: typeof mask !== 'undefined' ? mask : null,
attr: {
name: inputName,
placeholder: placeholder,
'aria-describedby': getDescriptionId(),
'aria-required': required,
'aria-invalid': error() ? true : 'false',
id: uid,
disabled: disabled
}" />
<!-- Magento_Theme/layout/default.xml -->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="before.body.end">
<block class="Magento\Framework\View\Element\Template" name="custom-masks" template="Magento_Theme::masks.phtml" />
</referenceBlock>
</body>
</page>
<!-- OPTIONAL - Use this file just to add this mask behavior to checkout fields (This example is useful to address form) -->
<!-- theme-folder/Magento_Theme/layout/checkout_index_index.xml -->
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shipping-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shippingAddress" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shipping-address-fieldset" xsi:type="array">
<item name="children" xsi:type="array">
<item name="telephone" xsi:type="array">
<item name="config" xsi:type="array">
<item name="mask" xsi:type="string">(99) 9999-9999?9</item>
</item>
</item>
<item name="postcode" xsi:type="array">
<item name="config" xsi:type="array">
<item name="mask" xsi:type="string">99999-999</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>