<div class="input-examples">
            <div>
                <h4>Default HTML Input Example</h4>
                <div class="form-group">
                    <label>Random No</label>
                    <input type="tel" class="form-control input-date"  value="123456789">
                </div>
            </div>

            <div>
                <h4>Cleave.js Formatted Input Example</h4>
                <div class="form-group">
                    <label>Random No</label>
                    <input type="tel" class="form-control cleave-input-random"  value="123456789">
                </div>
            </div>
        </div>
.input-examples {
  display: flex;

}
.input-examples>div {
  flex: 1;
  margin: 1em;
  background: #ececec;
  padding: 0.5em;
}
var cleave = new Cleave('.cleave-input-random', {
    delimiters: ['A', '£', '£', '$'],
    blocks: [1, 1, 1, 3, 1]
});

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

External JavaScript

  1. https://nosir.github.io/cleave.js/dist/cleave.min.js