andrehtissot/jquery-mask-as-number demo

Demonstration of https://github.com/andrehtissot/jquery-mask-as-number/

by André Tissot

HTML

<script src="https://rawgit.com/andrehtissot/jquery-mask-as-number/master/jquery-mask-as-number.js"></script>
<h1>Mask As Number Example</h1>
<fieldset>
  <legend>Integer Only Entry</legend>
  <fieldset>
    <legend>Text Field</legend>
    <label>Vanilla field: <input value="Initial text 123456789.98"/></label>
    <label>Masked field dynamically bound:
      <input class="maskedTextField" value="Initial text 123456789.98"/>
    </label>
    <label>Masked field with maxlength 8:
      <input class="maskedTextField" value="Initial text 123456789.98" maxlength="8" />
    </label>
    <label>Masked field with max value 512:
      <input class="maskedTextField" value="Initial text 123456789.98"
             data-mask-as-number-max="512" />
    </label>
    <label>Masked field with min value 2:
      <input class="maskedTextField" value="Initial text 123456789.98"
             data-mask-as-number-min="2" />
    </label>
    <label>Masked field with min 2 and max 3 as options:
      <input id="specialMaskedTextField" value="Initial text 123456789.98" />
    </label>
  </fieldset>
  <fieldset>
    <legend>Number Field</legend>
    <label>Vanilla field: <input type="number" value="Initial text 123456789.98"/></label>
    <label>Vanilla field with min value 2:
      <input type="number" value="Initial text 123456789.98" min="2" />
    </label>
    <label>Masked field dynamically bound:
      <input type="number" class="maskedTextField" value="Initial text 123456789.98"/>
    </label>
    <label>Masked field with maxlength 8:
      <input type="number" class="maskedTextField" value="Initial text 123456789.98"
             data-mask-as-number-maxlength="8" />
    </label>
    <label>Masked field with max value 512:
      <input type="number" class="maskedTextField" value="Initial text 123456789.98"
             max="512" />
    </label>
    <label>Masked field with min value 2:
      <input type="number" class="maskedTextField" value="Initial text 123456789.98"
            ...

CSS

html { filter: grayscale(100%); }
h1 { font-size: 20px; font-weight: normal; }
fieldset { max-width: 640px; margin: 4px 4px 30px 4px; }
input { float: right; width: 160px; }
label { line-height: 30px; display: block; margin-bottom: 20px; }
fieldset :last-child { margin-bottom: 0; }

JavaScript

$('.maskedTextField').maskAsNumber();
$('#specialMaskedTextField').maskAsNumber({min: 2, max: 3});
$('#specialMaskedNumberField').maskAsNumber({min: 2, max: 3});
$('#specialMaskedTextDecimalField').maskAsNumber({min: 2.32, max: 3.45, decimals: 2});
$('#specialMaskedNumberDecimalField').maskAsNumber({min: 2.32, max: 3.45, decimals: 2});