Web前端开发网

fly63.com

首页 资源 工具 文章 教程 栏目
  • 在线搜索
  • 文章标签
  • 广告合作
  • 赞助一下
  • 关于我们
资源推荐
LiblibAI
一站式AI内容创作生成平台,原创AI模型分享社区
宝塔服务器面板
简单好用的服务器运维面板
免费资源下载中心
一站式解决工作学习需求的宝藏网站
硅云优惠券
领先的基础云计算服务提供商,PHP云虚拟主机第一品牌
AiPPT
全智能AI一键生成 PPT
仙宫云
GPU算力租赁,云算力在线租赁平台
蜂小推
不扣量的项目推广平台
豆包AI
字节跳动旗下 AI 智能助手
Seedance 2.0
字节跳动新一代AI视频生成模型全面解析
腾讯云优惠券
云服务器,云数据库,CDN,域名注册等多种云计算服务

资源分类

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的资源
bxslider
响应式jQuery的内容滑块插件
官网
GitHub
jTable
创建基于 AJAX 的增删改查表 jQuery 插件
官网
GitHub
Parsley.js
功能强大的Js表单验证插件
官网
GitHub
qTip2
精致的jQuery提示信息插件
官网
GitHub
Inputmask
一个 jQuery 格式化输入插件
官网
GitHub
Nestable
一个可拖拽的树结构表现插件
点击进入
GitHub
magnify.js
一款jquery图片查看插件
官网
GitHub
jqPaginator.js
一款强大的jquery分页插件
官网
GitHub
目录

手机扫一扫预览

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

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