<h1>Inputmask Widget</h1> <p>Based on jquery.inputmask 3.x `Docs in GitHub</p> <p><a href="http://robinherbots.github.io/Inputmask/">http://robinherbots.github.io/Inputmask/</a></p> <p>| An Inputmask Widget helps the user with the input by ensuring a predefined format.</p> <p>| This can be useful for dates, numerics, phone numbers, ...</p> <h2>Instructions:</h2> <ul> <li><p>Just add attribute <em>widget=&quot;mask&quot;</em> and <em>data-inputmask[-<attribute>]=&quot;<value>&quot;</em> to <strong><field /></strong> on form, tree and kanban Some examples::</p> <p><field widget="mask" data-inputmask="'alias': 'date'" name="name" /> <field widget="mask" data-inputmask="'mask': '99/99/9999'" name="name" /> <field widget="mask" data-inputmask="'mask': '99-aa-**-AA-&amp;&amp;-##'" name="name" /> <field widget="mask" data-inputmask="'mask': '9', 'repeat': 10, 'greedy' : false" name="name" /></p></li> </ul> <p>Or::</p> <pre><code> &lt;field widget=&quot;mask&quot; data-inputmask-alias=&quot;date&quot; name=&quot;name&quot; /&gt; &lt;field widget=&quot;mask&quot; data-inputmask-mask=&quot;99/99/9999&quot; name=&quot;name&quot; /&gt; &lt;field widget=&quot;mask&quot; data-inputmask-mask=&quot;99-aa-**-AA-&amp;amp;&amp;amp;-##&quot; name=&quot;name&quot; /&gt; &lt;field widget=&quot;mask&quot; data-inputmask-mask=&quot;9&quot; data-inputmask-repeat=&quot;10&quot; data-inputmask-greedy=&quot;false&quot; name=&quot;name&quot; /&gt; </code></pre> <p><strong>Note:</strong> Use <em>contenteditable=&quot;true&quot;</em> for apply mask in others HTML tags: span, div, etc. <strong>Improve</strong></p> <ul> <li>Just add attribute <em>widget=&quot;mask_regex&quot;</em> and <em>data-inputmask[-regex]=&quot;<value>&quot;</em> to <strong><field /></strong></li> </ul> <p>With the regex extension you can use any regular expression as a mask. Currently this does only input restriction. There is no further masking visualization. Example email validation::</p> <pre><code>&lt;field widget=&quot;regex_mask&quot; data-inputmask-regex=&quot;[a-zA-Z0-9._%-]+@[a-zA-Z0-9-]+\.[a-zA-Z]{2,4}&quot; name=&quot;name&quot;/&gt; </code></pre> <ul> <li>Widgets names use:</li> </ul> <p>:mask: CharField Only</p> <p>:integer_mask: IntegerField in development...</p> <p>:float_mask: FloatField in development...</p> <p>:regex_mask: CharField Only</p> <p>:monetary_mask: in development...</p> <ul> <li>Masking definition:</li> </ul> <p>:9: Numeric value</p> <p>:a: Alphabetical value</p> <p>:*: Alphanumeric value</p> <p>:A: Alphabetical uppercasing</p> <p>:&amp;: Alfanumeric uppercasing - (Use <strong>&amp;</strong> for escape <strong>&amp;</strong> in XML file)</p> <p>:#: Hexadecimal</p> <ul> <li>Attributes:</li> </ul> <p>:mask: The mask to use.</p> <p>:repeat: Mask repeat function. Repeat the mask definition x-times.</p> <p>:greedy: Toggle to allocate as much possible or the opposite. Non-greedy repeat function.</p> <p>:placeholder: Change the mask placeholder. Default: &quot;_&quot;</p> <p>:autounmask: Automatically unmask the value when retrieved. Default: false.</p> <p>:removemaskonsubmit: *Remove the mask before submitting the form.Default: false</p> <p>:clearmaskonlostfocus: Remove the empty mask on blur or when not empty removes the optional trailing part Default: true</p> <p>:insertmode: Toggle to insert or overwrite input. Default: true.</p> <p>:clearincomplete: Clear the incomplete input on blur.</p> <p>:alias: The alias to use.</p> <ul> <li>Aliases:</li> </ul> <p>Some aliases found in the extensions are: email, currency, decimal, integer, date, datetime, dd/mm/yyyy, url, ip, etc. Docs:</p> <ul> <li>Date and Datetime <a href="https://github.com/RobinHerbots/Inputmask/blob/3.x/README_date.md">https://github.com/RobinHerbots/Inputmask/blob/3.x/README_date.md</a></li> <li>Numeric <a href="https://github.com/RobinHerbots/Inputmask/blob/3.x/README_numeric.md">https://github.com/RobinHerbots/Inputmask/blob/3.x/README_numeric.md</a></li> <li>Regex <a href="https://github.com/RobinHerbots/Inputmask/blob/3.x/README_regex.md">https://github.com/RobinHerbots/Inputmask/blob/3.x/README_regex.md</a></li> <li>Phone <a href="https://github.com/RobinHerbots/Inputmask/blob/3.x/README_phone.md">https://github.com/RobinHerbots/Inputmask/blob/3.x/README_phone.md</a></li> <li>Other <a href="https://github.com/RobinHerbots/Inputmask/blob/3.x/README_other.md">https://github.com/RobinHerbots/Inputmask/blob/3.x/README_other.md</a></li> </ul>