Mask Input Fields With Custom Data Formats – DataInput

Preview:

Description:

DataInput is a small JavaScript input mask library which can be used to automatically formats user input using specific patterns.

How to use it:

To get started, include the DataInput JavaScript and Stylesheet at the bottom of the webpage.

<link rel="stylesheet" href="datainput.css">
<script src="datainput.js"></script>

Create an inline span element on the page.

<span id="demo"></span>

Create a new instance and specify the data format.

var $d = datainput;
var instance = $d.createInput({ 
    format : '00000' 
});

Apply the DataInput to the span element you just created.

document.getElementById('demo').appendChild(instance.$el);

All possible options with default values.

var $d = datainput;
var instance = $d.createInput({ 
    format : '00',
    textAlign : 'left',
    fieldRe : '\\d+',
    directions : {},
    numCharsInMonospace : {}
});

Execute a function when the values changes.

instance.on('valuechange', function(event, detail) {
  console.log(event, detail);
});