做项目这么久,每次遇到要限制input框数据时,都是好一阵纠结,究竟在哪限制比较好?
情况1:输入数据的时候,不做限制,只有在点击确定的时候提醒用户
问题:交互感觉不好,可以随意输入,明明限制输入数字,效果如下:
情况2:和情况1差不多,但是在blur时候处理数据或提示用户
问题:如果点击确定才做验证,有可能先执行提交click事件再执行blur的情况
情况3:在输入的时候就做限制
问题:改变用户输入,光标有时不在用户原来输入的位置,而且触发时机要注意,是keyup?change?
个人感觉情况3的交互是最好的,而keyup一般情况下还可以,但是有种情况却会出现bug,如下图:
通过中文输入法,输入一段,然后用鼠标点击input以外的地方,使它失去了焦点。而刚刚所输入的内容就录入到输入框内。
故我最终选择了第三种方案,并采用了input change的时候验证
实例
因为我当前所做项目是用angular做的,这里就用angular语法举例.
html:
<input type="text" ng-model="item.num" ng-change="item.num=handleNum(item.num,1,fixedNun)"/>
javascript:(此处可以为0为业务需要)
$scope.handleNum = _handleNum;/*** 处理数字* @param num 输入的数字* @param type 过滤的类型 1.正整数且可以为0 2.正数且可以为0* @param fixedNum 保留多少位小数 如果type为2,则fixedNum为保留多少位小数* @private*/function _handleNum(num,type,fixedNum) {if(num!==""&&num!=="0"){var reg = ''; switch (type){//匹配正整数case 1:reg = /[^\d]/g;//先过滤非数字包括小数点num = num.replace(reg,'');//取得正整数,去除头部为0的数(如002223)num = num.replace(/^0{0,}/,'');break;//匹配小数点,保留多少位case 2:reg = /[^\d\.]/g;//先过滤非数字和小数点num = num.replace(reg,'');//获取第一个小数点出现的位置var index = num.indexOf(".");if(index!=-1){//过滤所有小数点num = num.replace(/\./g,'');//组合数字,AfterDotNum 为小数点后数字var AfterDotNum = num.substring(index,num.length);num = num.substring(0,index)+"."+AfterDotNum;//获取最终结果,如果最终的位数小于fixedNumif(fixedNum&&AfterDotNum.length>fixedNum){fixedNum = Number(fixedNum);num = Number(num).toFixed(fixedNum);}}break;}}return num;}