jQuery输入框限制输入内容格式插件

jquery.mask.js是一款jQuery输入框限制输入内容格式插件。该插件可以通过指定的规则来限制用户在输入框中输入的内容，例如限制日期格式，限制电话号码格式等，非常实用。

安装

可以通过Bower或npm来安装jquery.mask.js插件。

bower install jquery-mask-pluginnpm i jquery-mask-plugin                                  

使用方法

在页面中引入jquery和jquery.mask.js文件。

<script src="jquery.min.js"></script><script src="jquery.mask.js"></script>                

基本实用

jquery.mask.js输入框限制输入内容插件的一些基本实用示例如下：

$(document).ready(function(){  $('.date').mask('00/00/0000');  $('.time').mask('00:00:00');  $('.date_time').mask('00/00/0000 00:00:00');  $('.cep').mask('00000-000');  $('.phone').mask('0000-0000');  $('.phone_with_ddd').mask('(00) 0000-0000');  $('.phone_us').mask('(000) 000-0000');  $('.mixed').mask('AAA 000-S0S');  $('.cpf').mask('000.000.000-00', {reverse: true});  $('.cnpj').mask('00.000.000/0000-00', {reverse: true});  $('.money').mask('000.000.000.000.000,00', {reverse: true});  $('.money2').mask("#.##0,00", {reverse: true});  $('.ip_address').mask('0ZZ.0ZZ.0ZZ.0ZZ', {    translation: {      'Z': {        pattern: /[0-9]/, optional: true      }    }  });  $('.ip_address').mask('099.099.099.099');  $('.percent').mask('##0,00%', {reverse: true});  $('.clear-if-not-match').mask("00/00/0000", {clearIfNotMatch: true});  $('.placeholder').mask("00/00/0000", {placeholder: "__/__/____"});  $('.fallback').mask("00r00r0000", {      translation: {        'r': {          pattern: /[//]/,          fallback: '/'        },        placeholder: "__/__/____"      }    });  $('.selectonfocus').mask("00/00/0000", {selectOnFocus: true});});                                

通过data-mask属性来使用

你可以直接在HTML标签上通过data-mask属性来限制用户输入的内容格式。

<input type="text" name="field-name" data-mask="00/00/0000" /><input type="text" name="field-name" data-mask="00/00/0000" data-mask-reverse="true" /><input type="text" name="field-name" data-mask="00/00/0000" data-mask-clearifnotmatch="true" /><input type="text" name="field-name" data-mask="00/00/0000" data-mask-selectonfocus="true" />                

回调函数示例

var options =  {  onComplete: function(cep) {    alert('CEP Completed!:' + cep);  },  onKeyPress: function(cep, event, currentField, options){    console.log('A key was pressed!:', cep, ' event: ', event,                'currentField: ', currentField, ' options: ', options);  },  onChange: function(cep){    console.log('cep changed! ', cep);  },  onInvalid: function(val, e, f, invalid, options){    var error = invalid[0];    console.log ("Digit: ", error.v, " is invalid for the position: ", error.p, ". We expect something like: ", error.e);  }};$('.cep_with_callback').mask('00000-000', options);                                 

Mask作为函数来使用

var SPMaskBehavior = function (val) {  return val.replace(//D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';},spOptions = {  onKeyPress: function(val, e, field, options) {      field.mask(SPMaskBehavior.apply({}, arguments), options);    }};$('.sp_celphones').mask(SPMaskBehavior, spOptions);                                  

关于jquery.mask.js输入框限制输入内容格式插件更加详细的介绍，请查看github：https://github.com/igorescobar/jQuery-Mask-Plugin