input和React-Native的TextInput的输入限制，只能输入两位小数，类似价格限制

时间：2022-11-07 10:02:18

一、背景：

  想要实现一功能：

　　1. 最多只能输入两位小数，类似的价格限制

　　2. 实时监听限制输入，禁止输入不符合规范的字符（当输入违禁字符，进行删除操作）

　这样做的优点：

　　1. 在用户输入时直接进行限制，而不是在输入完才进行检测提示 --> 实时性

　　2. 直接在输入时进行规范，用户体验更好

 

二、分析：

　1. 实现对输入数据的实时监控

　　web一般使用 onkeyup、onpaste、oncontextmenu等事件来实时监听输入的字符变化

　　具体请看这篇博客： input实时监听控制输入框的输入内容和长度，并进行提示和反馈

   

　　react-native使用的TextInput，它自带的onChangeText的方法可以实现实时监听输入变化

 

　2. 需要使用正则表达式来实现字符的检测和替换

　　检测是否是保留两位小数的字符格式（只能放在blur事件和react-native的TextInput的onEndEditing内使用，进行数据检测）

　　reg = (([1-9]{1}\d*)|(0{1}))(\.\d{0,2})或者 /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/

 

三、正文

newText = newText.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字符
newText  = newText.replace(/^\./g,""); //验证第一个字符是数字（即第一个字符非“.”）
newText = newText.replace(/\.{2,}/g,"."); //只保留第一个, 清除多余的
newText  = newText.replace(".","$#$").replace(/\./g,"").replace("$#$","."); newText = newText.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); //只能输入两个小数

 

//React-Native中的使用
onChangeText={(text) => { let newText = (text != '' && text.substr(0,1) == '.') ? '' : text; newText = newText.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字符
        newText = newText.replace(/\.{2,}/g,"."); //只保留第一个, 清除多余的
        newText  = newText.replace(".","$#$").replace(/\./g,"").replace("$#$","."); newText = newText.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); //只能输入两个小数
        this.setState({price: newText}) } }

 

四、结语：

　　结束！

 

标签：

相关文章