Web前端开发网

web.fly63.com

首页 资源 工具 文章 教程 栏目
  • 在线搜索
  • 文章标签
  • 文章投稿
  • 关于我们
资源分类
AI智能酷站推荐招聘/兼职框架/库模块/管理移动端UI框架Web-UI框架Js插件CSS相关在线工具建站资源 更多
网站收录 / 问题反馈

jquery.mask.js

分享
复制链接
新浪微博
QQ 好友

扫一扫分享

jquery.mask.js
网站地址:http://igorescobar.github.io/jQuery-Mask-Plugin/
GitHub:https://github.com/igorescobar/jQuery-Mask-Plugin
描述信息:一款jQuery输入框限制输入内容格式插件
访问官网
GitHub

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


jquery.mask.js安装或引用

bower install jquery-mask-plugin
npm i jquery-mask-plugin

或

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


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





仅供个人学习参考/导航指引使用,具体请以第三方网站说明为准,本站不提供任何专业建议。如果地址失效或描述有误,请联系站长反馈~感谢您的理解与支持!

链接: https://web.fly63.com/nav/290

更多»
热门资源
jquery插件库
收集最全最新最好的jQuery插件
官网
jQuery之家
致力于搜集和整理各种jQuery插件,jQuery特效...
官网
fullPage.js
jQuery全屏滚动插件
官网
GitHub
Waterfall.js
瀑布流无限加载插件
官网
GitHub
Raty
一个非常棒的jQuery 评分插件
官网
GitHub
Bootstrap-waterfall
一款基于Bootstrap仿Pinterest网站的网格瀑布流插件
官网
GitHub
Jcrop
一个功能强大的 jQuery 图像裁剪插件
官网
GitHub
jcarousel
jQuery轮播图插件
官网
GitHub
Parallax.js
一款jQuery滚动视觉差插件
官网
GitHub
vegas
一个jQuery / Zepto幻灯片插件
官网
GitHub
paroller.js
一款轻量级的页面滚动视觉差特效jquery插件
官网
GitHub
lazyload.js
jquery图片懒加载插件
官网
GitHub
类似于jquery.mask.js的资源
cxSelect
基于 jQuery 的多级联动菜单插件
官网
GitHub
CardTabs
一款简单的jquery Tabs选项卡插件
官网
GitHub
jPlayer
基于jQuery的全平台全终端音频、视频播放器
官网
GitHub
Progression.js
在用户完成表单时为用户提供实时提示和进度更新
官网
GitHub
fancyBox
一款优秀的弹出框Jquery插件
官网
GitHub
FitVids.js
轻量、易用让视频响应屏幕尺寸变化的 jquery插件
官网
GitHub
At.js
一款仿github表情符号和at自动完成jquery插件
官网
GitHub
fakeLoader.js
十分炫酷的jQuery页面预加载Loading特效插件
官网
GitHub
目录

手机扫一扫预览

首页 技术导航 在线工具 技术文章 教程资源 前端标签 AI工具集 前端库/框架

Copyright © 2018 Web前端开发网 All Rights Reserved. 分享编程学习资源(教程/框架/库)、在线工具、技术教程、内容以学习参考为主,助您解决各类实际问题,快速提升专业能力。