Input数字限制为整数4位和小数后2位的方法[jquery 插件]
现在做项目经常会遇到限制input 输入框只允许输入特定内容的情况。
从网上找了不少解决方案,虽然都能实现只能输入数字的情况,但大都没有任何提示且输入时不够流畅,体验度不够友好。
又由于本人比较懒,所以写了个jQuery插件,方便将来使用。
实现内容:
input输入可自行设置整数位和小数位长度;
在限定范围内的输入的流畅性;
回调函数返回超出长度时的错误信息和真实数值;
只输入小数点时显示0.整数位自动补0;
小数点后不允许再次出现小数点。
知识点:
a.jQuery 插件的写法;
b.jQuery $.grep正则表达式的使用;
c.<input style=”ime-mode:disabled”/>。
使用方法:
1.引入jQuery脚本和本插件;
2.$(“input[type=text]”).checkNum({
integerLength:4,//整数位长度
decimalLength:2,//小数位长度
Keyup:function(objRt){
/***
objRt.outIntegerLength整数位是否超出规定长度 bool
objRt.outDecimalLength小数位是否超出规定长度 bool
objRt.entryValueReal输入框内真正的数值 int
***/
}
});
DEMO示例: input数字限制的demo
插件内容:
/***
date:2015/06/26
by:zhuifengh2o
site:www.lpsjj.cn
***/
;(function ($) {
$.fn.checkNum = function (obj) {
var option = $.extend({
integerLength: 4, //整数位长度
decimalLength: 2, //小数位长度
keyup: function (objRt) {
/***
objRt.outIntegerLength整数位是否超出规定长度 bool
objRt.outDecimalLength小数位是否超出规定长度 bool
objRt.forbidCode 是否有非法字符 bool
objRt.entryValueReal 输入框内真正的数值
***/
}
}, obj);
var objRtN = {
outIntegerLength: false,
outDecimalLength: false,
forbidCode: false,
entryValueReal: ''
};
$(this).css("ime-mode",'disabled');
$(this).on('keyup blur',function (e) {
var entryValue = $.trim($(this).val());
var rewrite = false;
//过滤非法字符
var enableStr = '.0123456789';
var entryValueEvery = entryValue.split('');
var entryValueM = $.grep(entryValueEvery, function (m, n) {
var regM = new RegExp(m);
return regM.test(enableStr);
}).join('');
if (entryValueM.length != entryValue.length) {
rewrite = true;
objRtN.forbidCode = true;
entryValue = entryValueM;
} else {
rewrite = false;
objRtN.forbidCode = false;
}
var entryValueN = entryValue;
if (~entryValue.indexOf('.')) {//过滤重复的'.'及'.'开头的情况
var valueArr = entryValue.split('.');
if (valueArr[0] == '') {
valueArr.unshift(0);
}
;
if (valueArr.length > 2) {
rewrite = true;
entryValueN = valueArr[0] + '.';
for (var i = 1; i < valueArr.length; i++) {
entryValueN += valueArr[i];
}
}
// valueArr = entryValueN.split('.');
}
;
valueArr = entryValueN.split('.');
//console.log(valueArr[0].length > option.integerLength);
if (valueArr[0].length > option.integerLength) {
objRtN.outIntegerLength = true;
valueArr[0] = valueArr[0].substring(0, option.integerLength);
if (typeof (valueArr[1]) == "undefined") {
entryValueN = valueArr[0];
$(this).val(entryValueN);
} else if (valueArr[1] == '') {
entryValueN = valueArr[0] + '.';
$(this).val(entryValueN);
} else {
valueArr[1] = valueArr[1].substring(0, option.decimalLength);
entryValueN = valueArr[0] + '.' + valueArr[1];
$(this).val(entryValueN);
}
} else if (typeof (valueArr[1]) != "undefined" && (valueArr[1].length > option.decimalLength)) {
objRtN.outDecimalLength = true;
valueArr[1] = valueArr[1].substring(0, option.decimalLength);
entryValueN = valueArr[0] + '.' + valueArr[1];
$(this).val(entryValueN);
} else if (rewrite) {
$(this).val(entryValueN);
objRtN.outIntegerLength = false;
objRtN.outDecimalLength = false;
} else {
objRtN.outIntegerLength = false;
objRtN.outDecimalLength = false;
}
objRtN.entryValueReal = $(this).val();
if (objRtN.entryValueReal.lastIndexOf('.') == (objRtN.entryValueReal.length-1)) {
objRtN.entryValueReal = objRtN.entryValueReal.substring(0,objRtN.entryValueReal.length-1);
}
option.keyup(objRtN);
});
};
})(jQuery);
上一篇:
火狐浏览器 button文字不居中显示
下一篇:
ie等浏览器部分常见bug及解决方案
静水缘首页
文章分类
最新文章
- nodejs私钥加密公钥解密的一个例子
- uniapp和微信小程序判断程序运行在开发或者测试或者线上版本的方法分别是什么
- electron使用electron-builder打包后模块包含exe文件执行失败
- Compile is disallowed on the main thread, if the buffer size is larger than 4KB
- better-sqlite3简介及常用操作
- nodejs 操作数据库的库
- nodejs使用http-proxy库实现多个域名代理和同时代理websocket的例子,代理包含https和http两种协议
- iis配置反向代理
- javascript伪多线程代码
- ip所在地址段判断