html输入格式限制,jQuery输入框限制输入内容格式插件
jquery.mask.js是一款jQuery输入框限制输入内容格式插件。该插件可以通过指定的规则来限制用户在输入框中输入的内容,例如限制日期格式,限制电话号码格式等,非常实用。
安装
可以通过Bower或npm来安装jquery.mask.js插件。
bower install jquery-mask-plugin
npm i jquery-mask-plugin
使用方法
在页面中引入jquery和jquery.mask.js文件。
基本实用
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属性来限制用户输入的内容格式。
回调函数示例
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);
html输入格式限制,jQuery输入框限制输入内容格式插件相关推荐
- html播放mov格式视频,jQuery及video标签视频播放弹窗插件支持mp4,mov等格式详解(图文)...
在做html5做播放视频时,如果是mp4,ogg,webm等视频格式,用h5自带的video标签就可以实现,但苹果的mov格式视频video标签是不支持的. h5实现mp4视频播放:video标签仅支 ...
- Vue中实现输入框Input输入格式限制
Vue中实现输入框Input输入格式限制 1.使用修饰符实现数字输入 在VUE中可以在v-modal后添加修饰符的形式来限制输入,比如: <input v-model.number=" ...
- html密码框输入内容隐藏,jQuery输入框密码的显示隐藏【代码分享】
效果图: 代码如下: jQuery输入框密码显示隐藏代码 @font-face {font-family: "iconfont"; src: url('iconfont.eot') ...
- JS通过正则限制 input 输入框只能输入整数、小数(金额或者现金)
第一: 限制只能是整数 [js] view plain copy <input type = "text" name= "number" id = 'nu ...
- JS实现在输入框内输入@时,邮箱账号自动补全
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8&quo ...
- vue前端验证输入_Vue-Element之vue-element 输入框验证
1.控制输入位数 限制输入为10位,这种方式可以使输入框中输入10位后不能输入后续内容 因为number输入框自动将最后一位小数点忽略不计,因此".","2." ...
- 表单输入框聚焦输入内容显示叉叉清除效果
处理表单的时候,经常有这种效果,当我们输入内容的时候输入框右边会动态显示一个叉叉图标,点击可以清除已输入的内容,当输入框没有输入内容时,叉叉会自己消失,当输入框焦点消失时,叉叉也会自己消失,最近刚好写 ...
- EditText内容格式化控件 XEditText 和 输入内容过滤器
在我们开发当中,输入框控件是很常见的,最常见的就是注册.登陆.密码设置与修改:另外就是身份证号和银行卡号的录入等.在录入这些信息的时候,如果我们直接使用系统的EditText进行编程,虽然能够实现,但 ...
- 自动输入脚本软件工具 --解决输入框禁止粘贴问题
作业输入框不能粘贴?试试这个,自动输入,且支持输入代码,不用担心代码输入格式乱了 该脚本实现读取本机上的文件内容并接管你的键盘进行自动输入 突破,破解不能粘贴的输入框 点击AutoEnter.exe运 ...
最新文章
- 如何让ie 7 支持box-shadow
- 常用maven插件总结
- hal库开启中断关中断_[STM32]HAL库下GPIO按键中断与去抖问题分析(分析源码解决问题)...
- imfunny-技术人员创业的己见
- 十九、深入Python匿名函数
- 重新定义“人货场”:淘宝情景计算探索实践
- q7goodies事例_Java 8 Friday Goodies:Lambda和SQL
- 牛客16589 机器翻译
- docker上传镜像到仓库
- Android 架构艺术之MVP
- 平均正确率aps apm apl_海口秀英区“三无小区”垃圾分类有高招 投放正确率达96%以上...
- Linux系统内存还有剩余就开始使用swap交换区了
- Python BFS 提取二值图联通域
- html网页中获取vf数据到mysql_vfp教程之用FoxWeb在网上快速发布你的FOXPRO数据库
- 论文简介:Extract Line Art from Illustrations
- linux移植中出现【can‘t open /dev/ttyO0: No such file or directory】解决方式
- 第二届天府大地艺术季(春)——唐昌镇战旗村分会场“红色记忆”系列主题活动开启
- uniapp 公众号打开小程序,app打开小程序,小程序打开其他小程序
- 高中计算机会考网络,高中计算机会考网络基础知识
- ERC223及ERC827实现代码欠缺安全考虑 —— ATN Token中的CUSTOM_CALL漏洞深入分析
热门文章
- 【Git基础笔记】常用命令
- [bzoj1834][ZJOI2010]network 网络扩容
- javaScript = == ===的区别
- 接口的隐式和显式实现
- Js整理工具-开发必备
- [转载] Numpy数组对象ndarray
- [转载] Java 单例(Singleton)类
- Django之中间件,csrf跨站伪造请求,auth认证模块
- Ubuntu18.0.4配置Hadoop1.2.1环境
- C 语言实例 - 计算 int, float, double 和 char 字节大小