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

PetitQ 表单/表格 2018-11-12 1.90K 0 0

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

使用方法

在页面中引入 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);

Github 地址：https://github.com/igorescobar/jQuery-Mask-Plugin

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

已有 474 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

表单/表格

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

使用方法

基本实用

回调函数示例

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

相关文章

全屏分步式用户调查问卷表单设计

强大通用js表单验证插件

模态窗口样式的用户注册UI界面设计

发表回复取消回复

热销模板

表单/表格

使用方法

基本实用

回调函数示例

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

相关文章

发表回复 取消回复

热销模板

发表回复取消回复