一、背景:

想要实现一功能:

  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(/^0+[0-9]+/g, "0"); //不能以0开头输入
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(/^0+[0-9]+/g, "0"); //不能以0开头输入
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})
}
}

四、结语:

  结束!

input和React-Native的TextInput的输入限制,只能输入两位小数(阻止0开头的输入),类似价格限制的更多相关文章

  1. React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例)

    React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例) TextInput组件介绍 TextInput是一个允许用户在应用中通过键盘输入文本的基本组 ...

  2. JS限制input输入的为数字并且有小数的时候最多保留两位小数

    JS限制input用户输入的为数字并且有小数的时候最多保留两位小数,代码如下: html部分: <input type="number" onkeypress="r ...

  3. 控制input只能输入数字和两位小数

    <input type="text" name="je" onkeyup="clearNoNum(this)" /> funct ...

  4. jquery控制input只能输入数字和两位小数

    jquery代码 function num(obj){ obj.value = obj.value.replace(/[^\d.]/g,""); //清除"数字" ...

  5. 【前端开发】限制input输入保留两位小数

    <input type="text" name='amount' id="cash_num" placeholder="请输入金额" ...

  6. input只能输入数字或两位小数

    /** * [只能输入数字和两位小数] * 举例:<input type="text" onkeyup="num(this)" size="10 ...

  7. js限制输入数字能输入小数点,js定义数组,js往数组中添加数据,js将字符型转为数字型,除法结果保留两位小数——js小测:计算比赛得分

    一个朋友跟我说要去给某个比赛算分: 规则:去掉最低分最高分求平均分: 最近在学习大数据可视化——图谱,用到js一些东西,所以今天就用js练练 用到知识点: js限制输入数字能输入小数点,js定义数组, ...

  8. js 保留两位小数 input要求是数字框,

    要求:input文本框只能输入数字,且只保留两位小数 问题:若设置input的  type="number" ,js处理部分若用到parseFloat方法处理,结果是string类 ...

  9. Android限定EditText的输入类型为数字或者英文(包括大小写),EditText,TextView只能输入两位小数

    Android限定EditText的输入类型为数字或者英文(包括大小写) // 监听密码输入框的输入内容类型,不可以输入中文    TextWatcher mTextWatcher = new Tex ...

随机推荐

  1. C# #if, #else和#endif预处理指令

        #if 使您可以开始条件指令,测试一个或多个符号以查看它们是否计算为 true.如果它们的计算结果确实为true,则编译器将计算位于 #if 与最近的 #endif 指令之间的所有代码.例如, ...

  2. 折叠纸片PFold.js

    PFold.js是一款折叠纸片插件,支持定义折叠纸牌数量.折叠动画效果.折叠方向,而且还支持折叠结束后回调方法. 在线实例 效果一 效果二 效果三 使用方法 <div id="uc-c ...

  3. zabbix利用python脚本发送钉钉报警

    #!/usr/bin/python # -*- coding: utf-8 -*- import requests import json import sys import os headers = ...

  4. Ubuntu网络配置IP和DNS等,适用于14.04,16.04和17.10

    本文主要介绍Ubuntu系统的网络设置,包括IP,DNS和主机名等,适用于14.04,16.04和17.10等版本 ===============  完美的分割线 ================ = ...

  5. .NET/C# 中你可以在代码中写多个 Main 函数,然后按需要随时切换

    .NET/C# 程序从 Main 函数开始执行,基本上各种书籍资料都是这么写的.不过,我们可以写多个 Main 函数,然后在项目文件中设置应该选择哪一个 Main 函数. 你可能会觉得这样没有什么用, ...

  6. CH1809 匹配统计

    题意 描述 阿轩在纸上写了两个字符串,分别记为A和B.利用在数据结构与算法课上学到的知识,他很容易地求出了"字符串A从任意位置开始的后缀子串"与"字符串B"匹配 ...

  7. ambassador 学习七 Mapping说明

    mapping 通过rest 资源与k8s 的service进行关联,ambassador 必须有一个或者多个提供访问servide 的mapping定义 mapping 可以包含的配置 rewrit ...

  8. 用ASP.Net(C#)连接Oracle数据库的方法及实例

    今天看了一下asp.net连接oracle数据库的方法,得到了如下代码.这段代码打开了MyTable表,并把操作员的名字列出.字段类型是OracleString.读取的时候用的是字段编号,我不知道怎么 ...

  9. pthread中取消线程

    取消线程:告诉一个线程关掉自己,取消操作允许线程请求终止其所在进程中的任何其他线程.不希望或不需要对一组相关的线程执行进一步操作时,可以选择执行取消操作.取消线程的一个示例是异步生成取消条件. 对于c ...

  10. windows7安装django并创建第一个应用

    1.安装django 1.1.下载Django包 https://www.djangoproject.com/download/https://www.djangoproject.com/m/rele ...