建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery用于输入框限制输入内容格式的JQuery插件jquery.mask.js

来源:易助科技网浏览量:9收藏

简介


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


JQuery用于输入框限制输入内容格式的JQuery插件jquery.mask.js-示例图



使用


1.  引入 jquery.js 和 jquery.mask.js 文件


2.  基本使用


$(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});
});


除了上面这样的方式外,你可以直接在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" />



相关链接


官方地址 :http://igorescobar.github.io/jQuery-Mask-Plugin/

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