手机版 | ------------全站资源有,统一解压码,解码平台,请点这里 ------------ 设首页 | 加收藏
当前位置: 网站首页 > jQuery库 > 文章 当前位置: jQ > 文章

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

时间:2020-07-01    点击: 次    来源:网络    作者:佚名 - 小 + 大

jQuery输入框限制输入内容格式插件
简要教程

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

安装

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

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

 jQuery输入框限制输入内容格式插件 本地下载

上一篇:智表-浏览器端仿EXCEL表格jQuery插件

下一篇:Bootstrap垂直手风琴折叠菜单特效

推荐阅读
浙ICP备14024822号  |   QQ:79720816  |  地址:蚂蚁分享-一个只做有用的分享。  |  电话:13388629007  |  
Copyright © 2020 天人文章管理系统 版权所有,授权www.antqq.com使用 Powered by 55TR.COM