<commit_before><!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <title>imaskjs - vanilla javascript input mask guide</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/kube/6.5.2/css/kube.min.css">
    <link rel="stylesheet" href="gh-pages/css/main.css">
    <meta name="viewport" content="width=device-width">
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
    <main>
      <header>
        <div>
          <h1 class="title"><a href="/imaskjs">imask<sub>js</sub></a></h1>
          <em>vanilla javascript input mask</em>
        </div>
        <nav class="breadcrumbs push-center">
          <ul>
            <li><a href="#common">common</a></li>
            <li><a href="#pattern">pattern</a></li>
            <li><a href="#number">number</a></li>
            <li><a href="#date">date</a></li>
            <li><a href="#dynamic">dynamic</a></li>
          </ul>
        </nav>
      </header>
      <main>
        <h2 id="getting-started" class="section-h"><a href="#getting-started">Getting Started</a></h2>
        <p>Install from <a href="https://www.npmjs.com/package/imask">npm</a>:</p>
        <pre><code>npm install imask</code></pre>
        <p>And import or require:</p>
        <pre><code>import IMask from 'imask';</code></pre>
        <p>or use CDN:</p>
        <pre><code>&lt;script src=&quot;https://unpkg.com/imask&quot;&gt;&lt;/script&gt;</code></pre>
        <p>For modern browsers <em>es201X</em> builds available (<code>imask.es.js</code> and <code>imask.es.min.js</code>).</p>
        <p>Simple use case:</p>
        <div class="toggle-panel">
          <label for="start-phone-mask-demo" class="muted">demo</label>
          <input id="start-phone-mask-demo" type="checkbox">
          <div class="toggle-panel-content">
            <form class="form">
              <div class="form-item">
                <label>Type here against mask <span class="desc">+{7}(000)000-00-00</span></label>
                <input id="start-phone-mask" type="text" value="">
                <div class="desc">unmasked: <span id="start-phone-unmasked"></span><span id="start-phone-complete" class="example__complete"></span></div>
              </div>
            </form>
          </div>
        </div>
        <pre><code>var element = document.getElementById('selector');
var maskOptions = {
  mask: '+{7}(000)000-00-00'
};
var mask = new IMask(element, maskOptions);</code></pre>

        <p>Since v1.0.0 IMask consists of two independent layers: model and view.<br>
        Model layer contains all masking facilities which can be used independently without UI.</p>
        <p id="support-older">View layer is a glue between UI element and model, it connects listeners and controls changes in both directions.</p>
        <p>Input processing is based on a simple idea of comparing states before and after change. State before change is obtained on <code>keydown</code> and on <code>input</code> actual processing takes place. <ins>In order to support older browsers</ins> manually call <code>_saveSelection</code> to save state and <code>_onInput</code> to handle changes. Pull requests for the beauty are welcomed.</p>
        <p>Currently, view layer contains only one component <code>InputMask</code> which supports HTML input-like API. Instance of <code>InputMask</code> is returned when IMask constructor is called.</p>
        <p>To create new mask on element use:</p>
        <pre><code>var mask = new IMask(element, maskOptions);</code></pre>

        <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"

mask.unmaskedValue = "70000000000";
console.log(mask.value);  // logs "+7(000)000-00-00"
console.log(mask.unmaskedValue);  // logs "70000000000"</code></pre>

        <p>Update options:</p>
        <pre><code>mask.updateOptions({
  mask: Number,
  min: 0,
  max: 100
});  // also updates UI</code></pre>

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

        <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);

// 'complete' event fired when the value is completely filled
// Note: this makes sense only for Pattern-based masks
mask.on("complete", function () {console.log(mask.value)});</code></pre>

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

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

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

        <p>In the above example all changes are proxied to the model layer first and then UI is updated. The core of masking on model layer is <a href="#common">IMask.Masked</a> base class.
        There are also several other model classes for the different <code>mask</code> property types that provide additional functionality:</p>
        <table>
          <thead>
            <tr>
              <th><code>mask</code> prop</th>
              <th>Model class</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><code>IMask.Masked</code> descendant or instance</td>
              <td><a href="#common">IMask.Masked</a></td>
            </tr>
            <tr>
              <td><code>RegExp</code></td>
              <td><a href="#common">IMask.MaskedRegExp</a></td>
            </tr>
            <tr>
              <td><code>Function</code></td>
              <td><a href="#common">IMask.MaskedFunction</a></td>
            </tr>
            <tr>
              <td><code>String</code></td>
              <td><a href="#pattern">IMask.MaskedPattern</a></td>
            </tr>
            <tr>
              <td><code>Number</code></td>
              <td><a href="#number">IMask.MaskedNumber</a></td>
            </tr>
            <tr>
              <td><code>Date</code></td>
              <td><a href="#date">IMask.MaskedDate</a></td>
            </tr>
            <tr>
              <td><code>Array</code> of masks</td>
              <td><a href="#dynamic">IMask.MaskedDynamic</a></td>
            </tr>
          </tbody>
        </table>


        <h2 id="common" class="section-h"><a href="#common">Common</a></h2>
        <p><a href="#common">IMask.Masked</a> is a base class of all other Masked* classes. Almost all base class options are applicable to subclasses.</p>
        <p>Example usage:</p>
        <div class="toggle-panel">
          <label for="validate-mask-demo" class="muted">demo</label>
          <input id="validate-mask-demo" type="checkbox">
          <div class="toggle-panel-content">
            <form class="form">
              <div class="form-item">
                <label>Type here against RegExp mask <span class="desc">/^\d+$/</span></label>
                <input id="validate-mask" type="text" value="">
              </div>
            </form>
          </div>
        </div>
        <pre><code>var digitsMask = new IMask(element, {
  mask: /^\d+$/
});</code></pre>

        <p>Update options:</p>
        <pre><code>mask.updateOptions({
  // while changing mask only same type allowed
  mask: /^\w+$/,  // ok
  // mask: "0000",  // ERROR! changing mask type on existing mask is not allowed!

  // ... other options<commit_msg>fix #40: add ex of using mask without UI<commit_after><!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <title>imaskjs - vanilla javascript input mask guide</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/kube/6.5.2/css/kube.min.css">
    <link rel="stylesheet" href="gh-pages/css/main.css">
    <meta name="viewport" content="width=device-width">
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
    <main>
      <header>
        <div>
          <h1 class="title"><a href="/imaskjs">imask<sub>js</sub></a></h1>
          <em>vanilla javascript input mask</em>
        </div>
        <nav class="breadcrumbs push-center">
          <ul>
            <li><a href="#common">common</a></li>
            <li><a href="#pattern">pattern</a></li>
            <li><a href="#number">number</a></li>
            <li><a href="#date">date</a></li>
            <li><a href="#dynamic">dynamic</a></li>
          </ul>
        </nav>
      </header>
      <main>
        <h2 id="getting-started" class="section-h"><a href="#getting-started">Getting Started</a></h2>
        <p>Install from <a href="https://www.npmjs.com/package/imask">npm</a>:</p>
        <pre><code>npm install imask</code></pre>
        <p>And import or require:</p>
        <pre><code>import IMask from 'imask';</code></pre>
        <p>or use CDN:</p>
        <pre><code>&lt;script src=&quot;https://unpkg.com/imask&quot;&gt;&lt;/script&gt;</code></pre>
        <p>For modern browsers <em>es201X</em> builds available (<code>imask.es.js</code> and <code>imask.es.min.js</code>).</p>
        <p>Simple use case:</p>
        <div class="toggle-panel">
          <label for="start-phone-mask-demo" class="muted">demo</label>
          <input id="start-phone-mask-demo" type="checkbox">
          <div class="toggle-panel-content">
            <form class="form">
              <div class="form-item">
                <label>Type here against mask <span class="desc">+{7}(000)000-00-00</span></label>
                <input id="start-phone-mask" type="text" value="">
                <div class="desc">unmasked: <span id="start-phone-unmasked"></span><span id="start-phone-complete" class="example__complete"></span></div>
              </div>
            </form>
          </div>
        </div>
        <pre><code>var element = document.getElementById('selector');
var maskOptions = {
  mask: '+{7}(000)000-00-00'
};
var mask = new IMask(element, maskOptions);</code></pre>

        <p>Since v1.0.0 IMask consists of two independent layers: model and view.<br>
        Model layer contains all masking facilities which can be used independently without UI.</p>
        <p id="support-older">View layer is a glue between UI element and model, it connects listeners and controls changes in both directions.</p>
        <p>Input processing is based on a simple idea of comparing states before and after change. State before change is obtained on <code>keydown</code> and on <code>input</code> actual processing takes place. <ins>In order to support older browsers</ins> manually call <code>_saveSelection</code> to save state and <code>_onInput</code> to handle changes. Pull requests for the beauty are welcomed.</p>
        <p>Currently, view layer contains only one component <code>InputMask</code> which supports HTML input-like API. Instance of <code>InputMask</code> is returned when IMask constructor is called.</p>
        <p>To create new mask on element use:</p>
        <pre><code>var mask = new IMask(element, maskOptions);</code></pre>

        <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"

mask.unmaskedValue = "70000000000";
console.log(mask.value);  // logs "+7(000)000-00-00"
console.log(mask.unmaskedValue);  // logs "70000000000"</code></pre>

        <p>Update options:</p>
        <pre><code>mask.updateOptions({
  mask: Number,
  min: 0,
  max: 100
});  // also updates UI</code></pre>

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

        <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);

// 'complete' event fired when the value is completely filled
// Note: this makes sense only for Pattern-based masks
mask.on("complete", function () {console.log(mask.value)});</code></pre>

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

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

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

        <p>In the above example all changes are proxied to the model layer first and then UI is updated. The core of masking on model layer is <a href="#common">IMask.Masked</a> base class.
        There are also several other model classes for the different <code>mask</code> property types that provide additional functionality:</p>
        <table>
          <thead>
            <tr>
              <th><code>mask</code> prop</th>
              <th>Model class</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><code>IMask.Masked</code> descendant or instance</td>
              <td><a href="#common">IMask.Masked</a></td>
            </tr>
            <tr>
              <td><code>RegExp</code></td>
              <td><a href="#common">IMask.MaskedRegExp</a></td>
            </tr>
            <tr>
              <td><code>Function</code></td>
              <td><a href="#common">IMask.MaskedFunction</a></td>
            </tr>
            <tr>
              <td><code>String</code></td>
              <td><a href="#pattern">IMask.MaskedPattern</a></td>
            </tr>
            <tr>
              <td><code>Number</code></td>
              <td><a href="#number">IMask.MaskedNumber</a></td>
            </tr>
            <tr>
              <td><code>Date</code></td>
              <td><a href="#date">IMask.MaskedDate</a></td>
            </tr>
            <tr>
              <td><code>Array</code> of masks</td>
              <td><a href="#dynamic">IMask.MaskedDynamic</a></td>
            </tr>
          </tbody>
        </table>

        <p>Mask also can be used without UI, e.g.</p>
        <pre><code>var masked = IMask.createMask({
  mask: '+7 (000) 000-00-00',
  // ...and other options
});
var maskedValue = masked.resolve('71234567890');

// mask keeps state after resolving
console.log(masked.value);  // same as maskedValue
// get unmasked value
console.log(masked.unmaskedValue);</code></pre>


        <h2 id="common" class="section-h"><a href="#common">Common</a></h2>
        <p><a href="#common">IMask.Masked</a> is a base class of all other Masked* classes. Almost all base class options are applicable to subclasses.</p>
        <p>Example usage:</p>
        <div class="toggle-panel">
          <label for="validate-mask-demo" class="muted">demo</label>
          <input id="validate-mask-demo" type="checkbox">
          <div class="toggle-panel-content">
            <form class="form">
              <div class="form-item">
                <label>Type here against RegExp mask <span class="desc">/^\d+$/</span></label>
                <input id="validate-mask" type="text" value="">
              </div>
            </form>
          </div>
        </div>
        <pre><code>var digitsMask = new IMask(element, {
  mask: /^\d+$/
});</code></pre>

        <p>Update options:</p>
        <pre><code>mask.updateOptions({
  // while changing mask only same type allowed
  mask: /^\w+$/,  // ok
  // mask: "0000",  // ERROR! changing mask type on existing mask is not allowed!

  // ... other options
{'fraction_non_alphanumeric': 0.1768230494645589, 'fraction_numerical': 0.01631820499745028, 'mean_word_length': 2.445859872611465, 'pattern_counts': {'":': 0, '<': 619, '<?xml version=': 0, '>': 619, 'https://': 6, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 6, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '589471', 'n_tokens_mistral': 5091, 'n_tokens_neox': 4820, 'n_words': 1175}