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