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

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

安装

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

bower install jquery-mask-plugin
npm 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