Here is our complete solution. Thanks to Dr Obx and Axel.
1) Download jquery mask plugin
2) Install it in ourmodule/static/src/js
3) Load the script
<template id="ourmodule.assets_frontend" inherit_id="website.assets_frontend" name="Shop">
<xpath expr="." position="inside">
<script type="text/javascript" src="/website_lapagept/static/src/js/website_sale_clear_cart.js"></script>
<script type="text/javascript" src="/website_lapagept/static/src/js/jquery-mask-plugin-master/src/jquery.mask.js"></script>
</xpath>
</template>
4) Add this in the file ourmodule/static/src/js/jquery-mask-plugin-master/src/jquery.mask.js
$(document).ready(function(){
// $('.zipcode').mask('A0A 0A0');
$('.zipcode').mask('Y9Y 9Y9',
{'translation': {
9: {pattern: /[0-9]/},
Y: {pattern: /[A-Z]/}
}
});
});
5) Add the correct .zipcode class to the field that should have the mask
<div t-attf-class="form-group #{error.get('zip') and 'has-error' or ''} col-lg-6">
<label class="control-label" for="zip">Code postal</label>
<input type="text" name="zip" class="form-control zipcode" t-att-value="checkout.get('zip')"/>
</div>
AND ALSO
<div t-attf-class="form-group #{error.get('shipping_zip') and 'has-error' or ''} col-lg-6">
<label class="control-label" for="shipping_zip" style="font-weight: normal">Zip / Postal Code</label>
<input type="text" name="shipping_zip" class="form-control zipcode" t-att-value="checkout.get('shipping_zip', '')" t-att-readonly=" 'readonly' if shipping_id >= 0 else ''"/>
</div>
And it works fine!
In my case (custom module) I did it that way:
So if you want you can modify py, add action "Validate" or something ....But in your case it will be better use jQuery as Axel suggested.
Thanks a lot!