JQuery.Inputmask example

Ejemplo de utilización de la librería jquery.inputmask

by dorenstein

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>
<h1>JQuery.Inputmask example</h1>

<form>
  <div class="form-group">
    <label for="numericInput">Default numeric mask</label>
    <input id="numericInput" type="text" class="form-control" data-inputmask="'alias': 'numeric'" value="1001.22">
  </div>
  <div class="form-group">
    <label for="currencyInput">Default currency mask</label>
    <input id="currencyInput" type="text" class="form-control" data-inputmask="'alias': 'currency'" value="1001.22">
  </div>
  <div class="form-group">
    <label for="euroInput">Custom euro currency mask (simple)</label>
    <input id="euroInput" type="text" class="form-control" data-inputmask="'alias': 'euro'" value="1001.22">
  </div>
  <div class="form-group">
    <label for="euroComplexInput">Custom euro currency mask (complex)</label>
    <input id="euroComplexInput" type="text" class="form-control" data-inputmask="'alias': 'euroComplex'" value="1001.22">
  </div>
</form>

CSS

body {
  width: 90%;
  margin: 0 5%;
}

JavaScript

// JQuery.Inputmask example.
var customInputmask = (function() {
  var config = {
  	extendDefaults: {
      showMaskOnHover: false,
    	showMaskOnFocus: false
		},
    extendDefinitions: {},
    extendAliases: {
    	'numeric': {
      	radixPoint: ',',
        groupSeparator: '.',
        autoGroup: true,
        placeholder: ''
      },
      'currency': {
      	alias: 'numeric',
        digits: '*',
        digitsOptional: true,
      	radixPoint: ',',
        groupSeparator: '.',
        autoGroup: false,
        placeholder: ''
      },
    	'euro': {
      	alias: 'currency',
        prefix: '',
        suffix: '',
      	radixPoint: '.',
        groupSeparator: '',
        autoGroup: false,
      },
    	'euroComplex': {
      	alias: 'currency',
        prefix: '',
        suffix: ' €',
      }
    }
  };

	var init = function() {
		Inputmask.extendDefaults(config.extendDefaults);
    Inputmask.extendDefinitions(config.extendDefinitions);
    Inputmask.extendAliases(config.extendAliases);
    $('[data-inputmask]').inputmask();
	};
  
  return {
  	init: init
  };
}());

// Initialize app.
(function() {
	customInputmask.init();
}());