Web前端开发网

fly63.com

首页 资源 工具 文章 教程 栏目
  • 在线搜索
  • 文章标签
  • 广告合作
  • 赞助一下
  • 关于我们
资源推荐
iSlide
让PPT设计简单起来,PPT模板下载平台
衡天云
海外云服务器12元/月起,限量抢购,超高性价比
fly63工具箱
简单、易用、便捷的在线工具
通义灵码
基于通义大模型的智能编程辅助工具
AiPPT
全智能AI一键生成 PPT
AI数字人
必火AI数字人一站式创作平台
5118站长工具
关键词、长尾词挖掘,AI驱动的SEO内容创作辅助平台
沁言学术
AI智能学术研究平台,覆盖科研全流程服务
流量变现平台
蜂小推,一款不扣量的项目推广平台
AI应用助手
一站式AI工具平台,为工作和学习提供智能解决方案

资源分类

AI智能 酷站推荐 招聘/兼职 框架/库 模块/管理 移动端UI框架 Web-UI框架 Js插件 Jquery插件 CSS相关 IDE环境 在线工具 图形动效 游戏框架 node相关 调试/测试 在线学习 社区/论坛 博客/团队 前端素材 图标/图库 建站资源 设计/灵感 IT资讯
网站收录 / 问题反馈

jquery.mask.js

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

扫一扫分享

网站地址: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://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的资源
Scrollify
jQuery全屏滚动插件
官网
GitHub
isotope
过滤和排序神奇布局插件
官网
GitHub
adaptive-backgrounds.js
提取图片主要部分颜色的 jQuery 插件
官网
GitHub
jQuery-Autocomplete
一个简单的,容易的,可定制的自动完成功能插件
官网
GitHub
Viewer.js
一款强大的图片查看器
官网
GitHub
s-gallery
使用了 CSS3 动画效果的 jQuery 响应式片画廊插件
官网
GitHub
OwlCarousel2
支持触摸屏的响应式jQuery旋转木马插件
官网
GitHub
mgGlitch.js
一款能够模拟显示器故障效果的jQuery插件
官网
GitHub
目录

手机扫一扫预览

》
分享组件加载中...
首页 技术导航 在线工具 技术文章 教程资源 前端标签 AI工具集 前端库/框架 实用工具箱 广告合作 关于我们

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