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

发布时间：2020-12-15 20:39:38 所属栏目：百科来源：网络整理

导读：一、背景： ? 想要实现一功能： 1. 最多只能输入两位小数，类似的价格限制 2. 实时监听限制输入，禁止输入不符合规范的字符（当输入违禁字符，进行删除操作）这样做的优点： 1. 在用户输入时直接进行限制，而不是在输入完才进行检测提示 -- 实时性 2. 直接

一、背景：

? 想要实现一功能：

　　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+).(dd).*$/,‘$1$2.$3‘); //只能输入两个小数

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

四、结语：

　　结束！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!