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

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

安装

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

bower install jquery-mask-plugin

npm i jquery-mask-plugin

使用方法

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

基本实用

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属性来限制用户输入的内容格式。

回调函数示例

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);