文本框只能输入一个小数点,0开头只能输入一个0,两位小数后就不能输入数字了实现方法
Offer 驾到,掘友接招!我正在参与2022春招打卡活动,点击查看活动详情。
前置条件:
这是以前做一个项目时候遇到的需求:是一个移动端的项目,用HTML5开发的项目,用户领取材料的时候要提交材料数量。要求用户只能输入一个小数点,如果0开头只能输入一个0,并且两位小数后就不能输入数字了。需求是必须在输入的时候做限制,不能单单做弹窗或者输入提示如何输入简单了事。当时用的技术栈是angularJS。所以以下就是用angularJS的实现方法来展示
分析:根据用户输入习惯,并且要考虑复制粘贴等突发情况,思路还是用正则表达式监测用户输入的内容来限制是否允许输入到input输入框。
实现方法:
$scope.overStock = function(item,event){\
//input框输入材料量超过库存时候清零\
if(item.needMaterialNumber > Number(item.availableQty)){\
item.needMaterialNumber = 0;\
};\
var tempQty = item.needMaterialNumber;\
tempQty_1 = tempQty && tempQty.slice(0, tempQty.length-1);\
\
if(!tempQty_1 && /\./g.test(tempQty)){ //小数点不能点首位\
item.needMaterialNumber = '';\
}else if(/\./g.test(tempQty_1)&& tempQty.slice(-1)=='.'){ //已经输入过点不能再次输入\
item.needMaterialNumber = tempQty_1;\
}else if(tempQty && tempQty.substring(0,2)=='00'&&tempQty.indexOf('.')==-1){\
item.needMaterialNumber = '0'\
}else if(tempQty.substring(0,2)!='0'){\
item.needMaterialNumber = tempQty;\
}else{\
item.needMaterialNumber = tempQty && tempQty.replace(/[^0-9\.]/g, '');\
} \
\
if(typeof String(tempQty).split('.')[1] != "undefined" && String(tempQty).split('.')[1].length>2){\
item.needMaterialNumber = item.needMaterialNumber.slice(0, tempQty.length-1);//这种在Android手机数字与字母组合搜索输入法时,精度会超过两位,所以不用换为下面的
item.needMaterialNumber = item.needMaterialNumber.substring(0,String(tempQty).split('.')[0].length+3)\
};\
\
\
};
总结:这里比较妙的取巧解决办法,是两位小数后不能输入数字了,是用精度不超过2位的思路去实现的,也就是字符长度截取,也就是最后这个if里面的代码。
转载自:https://juejin.cn/post/7077841276497821727