File manager

File manager - Edit - /home/autoph/public_html/portal/ajs/vendors/others/ngMask.html

Back
<div class="row"> <div class="row"> <h1>The Best NgMask!</h1> </div> </div> <div class="row"> <div class="row"> <h2>How To Use</h2> <ol> <li> <p>Add ngMask plugin after your AngularJS.</p> <p> <code> <script src="angular.min.js"></script> </code> <br> <code> <script src='ngMask.min.js'></script> </code> </p> </li> <li> <p>Add ngMask module dependency to your app.</p> <p> <code> angular.module('yourApp', ['ngMask']); </code> </p> </li> <li> <p>Use the avaiable patterns to create your mask. Set the mask as input attribute.</p> <code> <input type='text' ng-model='maskModel' mask='39/19/9999' /> </code> <span class="help-block">"/" isn't a pattern. It's considered a divisor. Every divisor is automatically written by ngMask. Check all available patterns here.</span> </li> <li> <p>Adjust your mask options.</p> <code> <input type='text' ng-model='maskModel ng-value='0/3/9' mask='3/9?' mask-repeat='2' mask-restrict='accept' mask-clean='true' mask-validate='false' mask-limit='false' /> </code> <span class="help-block">Generated mask '3/9?3/9?'. Check all available options here.</span> </li> </ol> </div> <hr> <div class="row"> <h2>Avaiable Patterns</h2> <p> You can make your mask using some patterns available. If you use a pattern not specified below to construct your mask, It'll be considered a divisor. A dividor is a character used to group semantic elements, for example: "/" in dates to separate days, months and years, "-" in SSN to separate area, group and serial numbers or "." in IPv4 to create 4 groups of 8 bits. </p> <div class="col-xs-12 col-sm-3"> <h3>Common Patterns</h3> <ul> <li> <span> <strong>'*'</strong> => /./ </span> <span class="help-block">Any single character</span> </li> <li> <span> <strong>'w'</strong> => /\w/ </span> <span class="help-block">Any word character (letter, number, underscore)</span> </li> <li> <span> <strong>'W'</strong> => /\W/ </span> <span class="help-block">Any non-word character</span> </li> <li> <span> <strong>'d'</strong> => /\d/ </span> <span class="help-block">Any digit</span> </li> <li> <span> <strong>'D'</strong> => /\D/ </span> <span class="help-block">Any non-digit</span> </li> <li> <span> <strong>'s'</strong> => /\s/ </span> <span class="help-block">Any whitespace character</span> </li> <li> <span> <strong>'S'</strong> => /\S/ </span> <span class="help-block">Any non-whitespace character</span> </li> <li> <span> <strong>'b'</strong> => /\b/ </span> <span class="help-block">Any word boundary</span> </li> </ul> </div> <div class="col-xs-12 col-sm-3"> <h3>Number Patterns</h3> <ul> <li> <span> <strong>'9'</strong> => /[0-9]/ </span> <span class="help-block">Valid numbers: 0,1,2,3,4,5,6,7,8,9</span> </li> <li> <span> <strong>'8'</strong> => /[0-8]/ </span> <span class="help-block">Valid numbers: 0,1,2,3,4,5,6,7,8</span> </li> <li> <span> <strong>'7'</strong> => /[0-7]/ </span> <span class="help-block">Valid numbers: 0,1,2,3,4,5,6,7</span> </li> <li> <span> <strong>'6'</strong> => /[0-6]/ </span> <span class="help-block">Valid numbers: 0,1,2,3,4,5,6</span> </li> <li> <span> <strong>'5'</strong> => /[0-5]/ </span> <span class="help-block">Valid numbers: 0,1,2,3,4,5</span> </li> <li> <span> <strong>'4'</strong> => /[0-4]/ </span> <span class="help-block">Valid numbers: 0,1,2,3,4</span> </li> <li> <span> <strong>'3'</strong> => /[0-3]/ </span> <span class="help-block">Valid numbers: 0,1,2,3</span> </li> <li> <span> <strong>'2'</strong> => /[0-2]/ </span> <span class="help-block">Valid numbers: 0,1,2</span> </li> <li> <span> <strong>'1'</strong> => /[0-1]/ </span> <span class="help-block">Valid numbers: 0,1</span> </li> <li> <span> <strong>'0'</strong> => /[0]/ </span> <span class="help-block">Valid numbers: 0</span> </li> </ul> </div> <div class="col-xs-12 col-sm-6"> <h3>Extra Patterns</h3> <ul> <li> <span> <strong>'?'</strong> => /?/ </span> <span class="help-block">Optional character. It makes the previous pattern optional.</span> </li> <li> <span> <strong>'A'</strong> => /[A-Z]/ </span> <span class="help-block">Any uppercase alphabet letter without accents</span> </li> <li> <span> <strong>'a'</strong> => /[a-z]/ </span> <span class="help-block">Any lowercase alphabet letter without accents</span> </li> <li> <span> <strong>'Z'</strong> => /[A-ZÇÀÁÂÃÈÉÊẼÌÍÎĨÒÓÔÕÙÚÛŨ]/ </span> <span class="help-block">Any uppercase alphabet letter with accents</span> </li> <li> <span> <strong>'z'</strong> => /[a-zçáàãâéèêẽíìĩîóòôõúùũüû]/ </span> <span class="help-block">Any lowercase alphabet letter with accents</span> </li> <li> <span> <strong>'@'</strong> => /[a-zA-Z]/ </span> <span class="help-block">Any alphabet letter without accents</span> </li> <li> <span> <strong>'#'</strong> => /[a-zA-ZçáàãâéèêẽíìĩîóòôõúùũüûÇÀÁÂÃÈÉÊẼÌÍÎĨÒÓÔÕÙÚÛŨ]/ </span> <span class="help-block">Any alphabet letter with accents</span> </li> <li> <span> <strong>'%'</strong> => /[0-9a-zA-zçáàãâéèêẽíìĩîóòôõúùũüûÇÀÁÂÃÈÉÊẼÌÍÎĨÒÓÔÕÙÚÛŨ]/ </span> <span class="help-block">Any digit and alphabet letter with accents</span> </li> </ul> </div> </div> </div> <hr> <div class="row"> <div class="row"> <h2>Options</h2> </div> </div> <div class="row"> <div class="row"> <ul> <li> <p><strong>NgModel (required)</strong>: model object</p> <span class="help-block">Attribute 'ng-model'</span> <p>The model of input.</p> </li> <li> <p><strong>Mask (required)</strong>: mask definition</p> <span class="help-block">Attribute 'mask'</span> <p>The mask for input.</p> </li> <li> <p><strong>NgValue</strong>: initial mask value (default: undefined)</p> <span class="help-block">Attribute 'ng-value'</span> <p>The initial value of input.</p> </li> <li> <p><strong>Restrict</strong>: 'select', 'reject' or 'accept' (default: select)</p> <span class="help-block">Attribute 'mask-restrict' or 'restrict'</span> <p> The way how ngMask will interact with user input. <strong>Select</strong> restriction: The input will show the char inputted even on error cases. If it has errors, the wrong char will be selected. <strong>Reject</strong> restriction: The input will show the char inputted on successfull cases. If it has errors, the wrong char will be rejected. <strong>Accept</strong> restriction: The input will always show the char inputted. No matter it's right or wrong. </p> </li> <li> <p><strong>Repeat</strong>: number - repeat mask n times (default: undefined)</p> <span class="help-block">Attribute 'mask-repeat' or 'repeat'</span> <p>Repeats the mask attribute the defined times.</p> </li> <li> <p><strong>Clean</strong>: 'true' or 'false' (default: false)</p> <span class="help-block">Attribute 'mask-clean' or 'clean'</span> <p>Cleans model value. Removes divisors from model value.</p> </li> <li> <p><strong>Validate</strong>: 'true' or 'false' (default: true)</p> <span class="help-block">Attribute 'mask-validate' or 'validate'</span> <p>Applies validation. Uses form controller setValidity method.</p> </li> <li> <p><strong>Limit</strong>: 'true' or 'false' (default: true)</p> <span class="help-block">Attribute 'mask-limit' or 'limit'</span> <p>Limits the max length inputted according with mask.</p> </li> </ul> </div> </div> </form> <div class="row"> <div class="row"> <h2>Examples</h2> </div> </div> <div class="row"> <form name="form"> <div class="row"> <h3>Date example</h3> <div class="col-xs-12 col-sm-4"> <fieldset> <label>MASK: 39/19/9999</label> <br> <input type="text" name="date" mask="39/19/9999" ng-model="date"> <p>Model: {{date}}</p> <p>Field Error: {{form.date.$error}}</p> <p>Field Valid: {{form.date.$valid}}</p> <code> <input type="text" name="date" mask="39/19/9999" ng-model="date"> </code> </fieldset> </div> <div class="col-xs-12 col-sm-4"> <fieldset> <label>MASK: 39/19/9999 CLEAN: TRUE</label> <br> <input type="text" name="date1" mask="39/19/9999" clean="true" ng-model="date1"> <p>Model: {{date1}}</p> <p>Field Error: {{form.date1.$error}}</p> <p>Field Valid: {{form.date1.$valid}}</p> <code> <input type="text" name="date1" mask="39/19/9999" clean="true" ng-model="date1"> </code> </fieldset> </div> <div class="col-xs-12 col-sm-4"> <fieldset> <label>MASK: 39/19/9999 CLEAN: FALSE</label> <br> <input type="text" name="date2" mask="39/19/9999" clean="false" ng-model="date2"> <p>Model: {{date2}}</p> <p>Field Error: {{form.date2.$error}}</p> <p>Field Valid: {{form.date2.$valid}}</p> <code> <input type="text" name="date2" mask="39/19/9999" clean="false" ng-model="date2"> </code> </fieldset> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-4"> <fieldset> <label>MASK: 19/39/9999 RESTRICT: REJECT</label> <br> <input type="text" name="date4" mask="19/39/9999" restrict="reject" ng-model="date4"> <p>Model: {{date4}}</p> <p>Field Error: {{form.date4.$error}}</p> <p>Field Valid: {{form.date4.$valid}}</p> <code> <input type="text" name="date" mask="19/39/9999" restrict="reject" ng-model="date4"> </code> </fieldset> </div> <div class="col-xs-12 col-sm-4"> <fieldset> <label>MASK: 19/39/9999 RESTRICT: REJECT CLEAN: TRUE</label> <br> <input type="text" name="date5" mask="19/39/9999" restrict="reject" clean="true" ng-model="date5"> <p>Model: {{date5}}</p> <p>Field Error: {{form.date5.$error}}</p> <p>Field Valid: {{form.date5.$valid}}</p> <code> <input type="text" name="date5" mask="19/39/9999" restrict="reject" clean="true" ng-model="date5"> </code> </fieldset> </div> <div class="col-xs-12 col-sm-4"> <fieldset> <label>MASK: 19/39/9999 RESTRICT: ACCEPT CLEAN: TRUE</label> <br> <input type="text" name="date6" mask="19/39/9999" restrict="accept" ng-model="date6"> <p>Model: {{date6}}</p> <p>Field Error: {{form.date6.$error}}</p> <p>Field Valid: {{form.date6.$valid}}</p> <code> <input type="text" name="date6" mask="19/39/9999" restrict="accept" clean="true" ng-model="date6"> </code> </fieldset> </div> </div> <hr> <div class="row"> <h3>Phone example</h3> <div class="col-xs-12 col-sm-4"> <fieldset> <label>MASK: (999) 999-9999 CLEAN: TRUE</label> <br> <input type="text" name="phone" mask="(999) 999-9999" clean="true" ng-model="phone"> <p>Model: {{phone}}</p> <p>Field Error: {{form.phone.$error}}</p> <p>Field Valid: {{form.phone.$valid}}</p> <code> <input type="text" name="phone" mask="(999) 999-9999" clean="true" ng-model="phone"> </code> </fieldset> </div> <div class="col-xs-12 col-sm-4"> <fieldset> <label>MASK: (99) 9?9999-9999</label> <br> <input type="text" name="phone2" mask="(99) 9?9999-9999" ng-model="phone2"> <p>Model: {{phone2}}</p> <p>Field Error: {{form.phone2.$error}}</p> <p>Field Valid: {{form.phone2.$valid}}</p> <code> <input type="text" name="phone2" mask="(99) 9?9999-9999" ng-model="phone2"> </code> </fieldset> </div> <div class="col-xs-12 col-sm-4"> <fieldset> <label>MASK: +99 99 9?9999-9999 RESTRICT: REJECT</label> <br> <input type="text" name="phone3" mask="+99 99 9?9999-9999" restrict="reject" ng-model="phone3"> <p>Model: {{phone3}}</p> <p>Field Error: {{form.phone3.$error}}</p> <p>Field Valid: {{form.phone3.$valid}}</p> <code> <input type="text" name="phone3" mask="+99 99 9?9999-9999" restrict="reject" ng-model="phone3"> </code> </fieldset> </div> </div> <hr> <div class="row"> <h3>String example</h3> <div class="col-xs-12 col-sm-4"> <fieldset> <label>MASK: % REPEAT: 30 RESTRICT: REJECT</label> <br> <input type="text" name="name0" mask="%" repeat="30" restrict="reject" ng-model="name0"> <p>Model: {{name0}}</p> <p>Field Error: {{form.name0.$error}}</p> <p>Field Valid: {{form.name0.$valid}}</p> <code> <input type="text" name="name0" mask="%" repeat="30" restrict="reject" ng-model="name0"> </code> </fieldset> </div> <div class="col-xs-12 col-sm-4"> <fieldset> <label>MASK: @ REPEAT: 15</label> <br> <input type="text" name="name2" mask="@" repeat="15" ng-model="name2"> <p>Model: {{name2}}</p> <p>Field Error: {{form.name2.$error}}</p> <p>Field Valid: {{form.name2.$valid}}</p> <code> <input type="text" name="name2" mask="@" repeat="15" ng-model="name2"> </code> </fieldset> </div> <div class="col-xs-12 col-sm-4"> <fieldset> <label>MASK: w?s? REPEAT: 10 RESTRICT: REJECT VALIDATE: FALSE</label> <br> <input type="text" name="name3" mask="w?s?" repeat="10" restrict="reject" validate="false" ng-model="name3"> <p>Model: {{name3}}</p> <p>Field Error: {{form.name3.$error}}</p> <p>Field Valid: {{form.name3.$valid}}</p> <code> <input type="text" name="name3" mask="w?s?" repeat="10" restrict="reject" validate="false" ng-model="name3"> </code> </fieldset> </div> </div> <hr> <div class="row"> <h3>IPv4 example</h3> <div class="col-xs-12 col-sm-4"> <fieldset> <label>MASK: 95?5?.95?5?.95?5?.95?5?</label> <br> <input type="text" name="ip" mask="95?5?.95?5?.95?5?.95?5?" ng-model="ip"> <p>Model: {{ip}}</p> <p>Field Error: {{form.ip.$error}}</p> <p>Field Valid: {{form.ip.$valid}}</p> <code> <input type="text" name="ip" mask="95?5?.95?5?.95?5?.95?5?" ng-model="ip"> </code> </fieldset> </div> <div class="col-xs-12 col-sm-4"> <fieldset> <label>MASK: 95?5?.? REPEAT: 4 CLEAN: TRUE</label> <br> <input type="text" name="ip2" mask="95?5?.?" repeat="4" clean="true" ng-model="ip2"> <p>Model: {{ip2}}</p> <p>Field Error: {{form.ip2.$error}}</p> <p>Field Valid: {{form.ip2.$valid}}</p> <code> <input type="text" name="ip2" mask="95?5?" repeat="4" clean="true" ng-model="ip2"> </code> </fieldset> </div> <div class="col-xs-12 col-sm-4"> <fieldset> <label>MASK: 255.255.255.255</label> <br> <input type="text" name="ip3" mask="255.255.255.255" ng-model="ip3"> <p>Model: {{ip3}}</p> <p>Field Error: {{form.ip3.$error}}</p> <p>Field Valid: {{form.ip3.$valid}}</p> <code> <input type="text" name="ip3" mask="255.255.255.255" ng-model="ip3"> </code> </fieldset> </div> </div> <hr> <div class="row"> <h3>CPF example</h3> <div class="col-xs-12 col-sm-4"> <fieldset> <label>MASK: 999.999.999-99</label> <br> <input type="text" name="cpf1" mask="999.999.999-99" ng-model="cpf1"> <p>Model: {{cpf1}}</p> <p>Field Error: {{form.cpf1.$error}}</p> <code> <input type="text" name="cpf1" mask="999.999.999-99" ng-model="cpf1"> </code> </fieldset> </div> <div class="col-xs-12 col-sm-4"> <fieldset> <label>MASK: 999.999.999-99 CLEAN: TRUE</label> <br> <input type="text" name="cpf3" mask="999.999.999-99" clean="true" ng-model="cpf3"> <p>Model: {{cpf3}}</p> <p>Field Error: {{form.cpf3.$error}}</p> <code> <input type="text" name="cpf3" mask="999.999.999-99" clean="true" ng-model="cpf3"> </code> </fieldset> </div> <div class="col-xs-12 col-sm-4"> <fieldset> <label>MASK: 999.999.999-99 CLEAN: FALSE</label> <br> <input type="text" name="cpf2" mask="999.999.999-99" clean="false" ng-model="cpf2"> <p>Model: {{cpf2}}</p> <p>Field Error: {{form.cpf2.$error}}</p> <code> <input type="text" name="cpf2" mask="999.999.999-99" clean="false" ng-model="cpf2"> </code> </fieldset> </div> </div> <hr> <div class="row"> <h3>Numbers example</h3> <div class="col-xs-12 col-sm-4"> <fieldset> <label>MASK: 123?4? RESTRICT: REJECT LIMIT: FALSE</label> <br> <input type="text" name="optional" mask="123?4?" restrict="reject" limit="false" ng-model="optional"> <p>Model: {{optional}}</p> <p>Field Error: {{form.optional.$error}}</p> <p>Field Valid: {{form.optional.$valid}}</p> <code> <input type="text" name="optional" mask="123?4?" restrict="reject" limit="false" ng-model="optional"> </code> </fieldset> </div> <div class="col-xs-12 col-sm-4"> <fieldset> <label>MASK: 9 REPEAT: 5</label> <br> <input type="text" name="repeat" mask="9" repeat="5" ng-model="repeat"> <p>Model: {{repeat}}</p> <p>Field Error: {{form.repeat.$error}}</p> <p>Field Valid: {{form.repeat.$valid}}</p> <code> <input type="text" name="repeat" mask="9" repeat="5" ng-model="repeat"> </code> </fieldset> </div> <div class="col-xs-12 col-sm-4"> <fieldset> <label>MASK: 99999</label> <br> <input type="text" name="dontrepeat" mask="99999" ng-model="dontrepeat"> <p>Model: {{dontrepeat}}</p> <p>Field Error: {{form.dontrepeat.$error}}</p> <p>Field Valid: {{form.dontrepeat.$valid}}</p> <code> <input type="text" name="dontrepeat" mask="99999" ng-model="dontrepeat"> </code> </fieldset> </div> </div> <hr> <div class="row"> <h3>Default value example</h3> <div class="col-xs-12 col-sm-4"> <fieldset> <label>MASK: 39/19/9999</label> <br> <input type="text" name="dateDefault" mask="39/19/9999" ng-value="30/09/1986" ng-model="dateDefault"> <p>Model: {{dateDefault}}</p> <p>Field Error: {{form.dateDefault.$error}}</p> <code> <input type="text" name="dateDefault" mask="39/19/9999" ng-value="30/09/1986" ng-model="dateDefault"> </code> </fieldset> </div> <div class="col-xs-12 col-sm-4"> <fieldset> <label>MASK: 999.999.999-99 CLEAN: FALSE</label> <br> <input type="text" name="cpfDefault" mask="999.999.999-99" clean="false" ng-value="a8799900105" ng-model="cpfDefault"> <p>Model: {{cpfDefault}}</p> <p>Field Error: {{form.cpfDefault.$error}}</p> <code> <input type="text" name="cpfDefault" mask="999.999.999-99" clean="false" ng-value="a8799900105" ng-model="cpfDefault"> </code> </fieldset> </div> <div class="col-xs-12 col-sm-4"> <fieldset> <label>MASK: 9 REPEAT: 5</label> <br> <input type="text" name="numberDefault" mask="9" repeat="5" ng-value="12345" ng-model="numberDefault"> <p>Model: {{numberDefault}}</p> <p>Field Error: {{form.numberDefault.$error}}</p> <code> <input type="text" name="numberDefault" mask="9" repeat="5" ng-value="12349" ng-model="numberDefault"> </code> </fieldset> </div> </div> </form> </div> <p class="text-center"> <br> <a href="https://github.com/candreoliveira/ngMask">@candreoliveira - ngMask</a> <br> </p>

| ver. 1.4 | . | PHP 8.1.32 | Generation time: 0.07 | proxy | phpinfo | Settings