Skip to content

Commit

Permalink
Merge branch 'gh-pages' of github.com:uNmAnNeR/imaskjs into gh-pages
Browse files Browse the repository at this point in the history
  • Loading branch information
uNmAnNeR committed Oct 28, 2017
2 parents 16c8803 + 6edcf2e commit 6e1ca72
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 12 deletions.
22 changes: 11 additions & 11 deletions guide.html
Expand Up @@ -61,7 +61,7 @@ <h2 id="getting-started" class="section-h"><a href="#getting-started">Getting St
<p>Basic use case:</p>
<pre><code>var mask = new IMask(element, maskOptions);</code></pre>

<p>Get/set value and unmasked value</p>
<p>Get/set value and unmasked value:</p>
<pre><code>mask.value = "+7(999)999-99-99";
console.log(mask.value); // logs "+7(999)999-99-99"
console.log(mask.unmaskedValue); // logs "79999999999"
Expand All @@ -77,10 +77,10 @@ <h2 id="getting-started" class="section-h"><a href="#getting-started">Getting St
max: 100
}); // also updates UI</code></pre>

<p>Clean and destroy</p>
<p>Clean and destroy:</p>
<pre><code>mask.destroy();</code></pre>

<p>Listen to events</p>
<p>Listen to events:</p>
<pre><code>// 'accept' event fired on input when mask value has changed
function log () {console.log(mask.value)};
mask.on("accept", log);
Expand All @@ -89,13 +89,13 @@ <h2 id="getting-started" class="section-h"><a href="#getting-started">Getting St
// This makes sense only for Pattern-based masks
mask.on("complete", function () {console.log(mask.value)});</code></pre>

<p>Stop listening to events</p>
<p>Stop listening to events:</p>
<pre><code>mask.off("accept", log);

// omit handler argument to unlisten all
mask.off("complete");</code></pre>

<p>Get masked model</p>
<p>Get masked model:</p>
<pre><code>var masked = mask.masked;
masked.reset(); // UI will NOT be updated</code></pre>

Expand Down Expand Up @@ -168,7 +168,7 @@ <h2 id="common" class="section-h"><a href="#common">Common</a></h2>
<p>Get/set value and unmasked value</p>
<pre><code>masked.value = 'hello world!';
console.log(masked.unmaskedValue);</code></pre>
<p>Use <code>prepare (value, masked)</code> option for preprocessing input and <code>commit (value, masked)</code> option for postprocessing after UI was deactivated:</p>
<p>Use <code>prepare (value, masked)</code> option for preprocessing input and <code>commit (value, masked)</code> option for postprocessing after UI is deactivated:</p>
<div class="toggle-panel">
<label for="uppercase-mask-demo" class="muted">demo</label>
<input id="uppercase-mask-demo" type="checkbox">
Expand All @@ -192,7 +192,7 @@ <h2 id="common" class="section-h"><a href="#common">Common</a></h2>
masked._value = value.toLowerCase(); // Don't do it
}
});</code></pre>
<p>Usually you don't need to manually create instances of that type, because it will be done by IMask internally. But you can subclass from it to add some specific behavior.</p>
<p>Usually you don't need to create instances of that type manually, because it will be done by IMask internally. But you can subclass from it to add some specific behavior.</p>
<p>Additionaly to <code>mask</code> option you can pass custom validator as <code>validate (value, masked)</code> option for some complex checks on any mask types excluding <code>Function</code> and <code>RegExp</code>, because they are already validators themselves. <strong>But don't change <code>masked</code> instance inside callbacks.</strong></p>
<fieldset>
<p><strong>Also make sure that your mask or validator works with any of intermediate states, not just final value. For example you want to restrict input to "123" and do:</strong></p>
Expand Down Expand Up @@ -384,7 +384,7 @@ <h2 id="pattern" class="section-h"><a href="#pattern">Pattern</a></h2>
},

// use range to restrict input to numbers in range
// mask size is the length in chars of max bound or could be provided as second parameter
// mask size is the length in chars of max bound or can be provided as second parameter
// to input smaller values pad zeros at beginning
<ins>MM</ins>: new IMask.MaskedPattern.Group.Range([1, 12], /* optional size */),

Expand Down Expand Up @@ -466,15 +466,15 @@ <h2 id="number" class="section-h"><a href="#number">Number</a></h2>
// other options are optional with defaults
scale: 2, // digits after point, 0 for integers
signed: false, // disallow negative
thousandsSeparator: '', // could be any single char
thousandsSeparator: '', // any single char
postFormat: {
padFractionalZeros: false, // if true, then pads zeros at end to the length of scale
normalizeZeros: true // appends or removes zeros at ends
},
radix: ',', // fractional delimiter
mapToRadix: ['.'] // symbols to process as radix

// number interval options additionally could be set (e.g.)
// additional number interval options (e.g.)
min: -10000,
max: 10000
});</code></pre>
Expand Down Expand Up @@ -526,7 +526,7 @@ <h2 id="date" class="section-h"><a href="#date">Date</a></h2>
min: new Date(2000, 0, 1), // defaults to 1900-01-01
max: new Date(2020, 0, 1), // defaults to 9999-01-01

// also Pattern options could be set
// also Pattern options can be set
placeholder: {lazy: false}
});</code></pre>
<p>Easy integration with <a href="https://momentjs.com/">Moment.js</a>:</p>
Expand Down
2 changes: 1 addition & 1 deletion src/masked/regexp.js
Expand Up @@ -4,7 +4,7 @@ import Masked from './base';
export default
class MaskedRegExp extends Masked {
constructor (opts={}) {
opts.validate = (value) => opts.mask.test(value);
opts.validate = (value) => value.search(opts.mask) >= 0;
super(opts);
}
}

0 comments on commit 6e1ca72

Please sign in to comment.