React Native 实现过滤中文，只能输入数字和小数点

最新推荐文章于 2024-05-26 21:16:02 发布
最新推荐文章于 2024-05-26 21:16:02 发布
阅读量1.9k 收藏
点赞数 1
分类专栏： 学习笔记 文章标签： React Native TextInput
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44557421/article/details/88063532
版权
本文介绍了如何在React Native中使用TextInput组件实现过滤，仅允许用户输入数字和小数点。通过onTextChange事件和isNaN函数进行验证，确保输入合法。对于eslint校验问题，也提供了解决方案。
摘要由CSDN通过智能技术生成

React Native 实现过滤中文，只能输入数字和小数点


在使用React Native 的TextInput时，有时需要过滤中文，只能让用户输入数字和小数点。
但是TextInput方法本身没有相应的api，所以解决办法为，在onTextChange事件中手动过滤中文，再设置keyboardType=‘numeric’，用户输入时就会弹出数字键盘。

onTextChange代码：


	<TextInput 
		value={
   this.state.text}
		onTextChange={
   (val) =>{
   
      		text = isNaN(val) ? '' : val;
			this.setState({
   text});
		}
		keyboardType
最低0.47元/天 解锁文章
首席外科戴夫
关注
专栏目录
react-native 学习笔记
hello_nine的博客
10-05 1027
一.常见的属性: 1.flex:如果唯一父级是1,则代表占满整个栏目;如果有几个子级,那么会按照子集分配的flex数量来累计,根据flex的数量来等额划分 2.flexDirection: 属性 row(设置主轴为水平方向) column(默认,垂直方向)3.alignItems 表示与主轴相对的轴的显示方向,例如主轴默认是纵轴,那么alignItems代表横轴(水平),可以设置flex-s
input和React-Native的TextInput的输入限制，只能输入两位小数（阻止0开头的输入），类似价格限制...
weixin_30242907的博客
11-27 1094
一、背景： 想要实现一功能： 　　1. 最多只能输入两位小数，类似的价格限制 　　2. 实时监听限制输入，禁止输入不符合规范的字符（当输入违禁字符，进行删除操作） 　这样做的优点： 　　1. 在用户输入时直接进行限制，而不是在输入完才进行检测提示 --> 实时性 　　2. 直接在输入时进行规范，用户体验更好 二、分析： 　1. 实现对输入数据的实时监控 　　web...
React Native之TextInput限制只能输入数字和小数
热门推荐
fox_wei的博客
04-12 1万+
今天做了一个类似计算器的功能的，但是在输入TextInput遇到了这个问题了。那么我这次来写一下关于这个该怎么整理import React from 'react'; import { StyleSheet, Text, View, Image, Dimensions, TextInput, TouchableOpacity, ScrollView } from 'react-native';
React Native只支持输入数字和小数点 并且保留两位小数
Donkey的博客
09-11 1437
overMaxLength(text) { // 只支持输入数字和小数点 const numberReg = new RegExp(/^[0-9.]*$/); if(!numberReg.test(text)) { text = text.substring(0, text.length - 1); console.log('texttexttex...
react-native TextInput只能输入纯数字
qq_32114025的博客
04-01 4316
https://www.jianshu.com/p/74ff86beaeaa onChangeText={(text) => { const newText = text.replace(/[^\d]+/, ''); //可以打印...
React Native 之 键盘（十四）
最新发布
qq_35876316的博客
05-26 306
在 React Native 中，当用户与文本输入组件（如 TextInput）交互时，系统可能会自动显示键盘。，因为键盘的显示和隐藏主要是由系统根据用户的交互行为来管理的。但是，你可以通过一些方法影响键盘的行为，比如设置 TextInput的属性来控制键盘的类型，或者在用户完成输入后手动隐藏键盘。
keyboardtype="numeric"
07-28
- *2* *3* [React Native 实现过滤中文，只能输入数字和小数点](https://blog.csdn.net/weixin_44557421/article/details/88063532)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm...
从实战上手把手搞懂JS对象
码工是小希
03-09 1479
马上收藏
2022前端都考察些什么
loveX001的博客
09-27 416
两个块级元素的上外边距和下外边距可能会合并（折叠）为一个外边距，其大小会取其中外边距值大的那个，这种行为就是外边距折叠。需要注意的是，浮动的元素和绝对定位这种脱离文档流的元素的外边距不会折叠。重叠只会出现在垂直方向。如果两者都是正数，那么就去最大者如果是一正一负，就会正值减去负值的绝对值两个都是负值时，用0减去两个中绝对值大的那个兄弟之间重叠和父子之间重叠（1）兄弟之间重叠float底部元素的position的值为（2）父子之间重叠子元素加入浮动属性或定位前端进阶面试题详细解答。
前端2020面试题195道
weijieyuhyt的博客
01-13 1万+
HTML5面试题 一、 Doctype的作用? 严格模式和混杂模式的区分，以及如何触发这2种模式? <!DOCTYPE> 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。 DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 严格模式就是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法， 混杂模式...
React Native 键盘KeyBoard问题
孟凡涛 的博客
07-27 2050
React Native KeyBoard键盘问题收集正路
Input输入框如何禁止输入中文
qq_2417580538的博客
06-16 7844
设置输入框的样式，代码如下 <span style="font-size:18px;"><input type = "text" id = "jscaptcha_input" style="ime-mode:disabled;" maxlength="5"/></span> 给输入框的样式添加 “ ime-mode:disabled” 即可限制输入框不能输入中文。 但该方法在谷歌浏览器中不管用，ie与火狐都支持 这种方式是最常见的，但是不支持谷歌，于是又找了一个新的方
React-Native的基本控件属性方法
weixin_30244889的博客
07-22 189
对React-Native的学习，从熟悉基本控件开始。 View 属性方法 序号 名称 属性Or方法 类型 说明 1 accessibilityLabel 属性 string 2 accessible 属性 bool 当为true时，表示该元素是可以进行访问， 默认情况下所有可触摸的元素控...
React Native 之 TextInput使用
陈亮的博客
03-02 505
前言 学习本系列内容需要具备一定 HTML 开发基础，没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长，所以对其中的内容和性质了解可能会有所偏差，在学习中如果有错会及时修改内容，也欢迎万能的朋友们批评指出，谢谢 文章第一版出自简书，如果出现图片或页面显示问题，烦请转至 简书 查看 也希望喜欢的朋友可以点赞
React Native Keyboard使用详解
https://www.xiaohongshu.com/user/profile/5f3543150000000001002b2e
04-18 7194
当我们点击输入框时，手机的软键盘会自动弹出，以便用户进行输入。但有时我们想在键盘弹出时对页面布局做个调整，或者在程序中使用代码收起这个软键盘，这些借助 React Native 框架提供的Keyboard API 就可以实现。一、Keyboard API提供的方法Keyboard API提供如下的静态函数供开发者使用：1、addListener(eventName, callback)（1）这个函...
React Native开发之——组件TextInput
我的博客
03-04 615
前言React Native中用于输入文本的组件是TextInput，类似于Android中的EditText，TextInput也是继承自 View,所以 View 的属性 TextInput 也能使用，一些样式类的属性可以参照 View 的相关属性。本文主要讲述：autoCapitalize属性autoCorrect属性autoFocus属性keyboardType属性（设置软键盘类型）ret...
一起来点React Native——常用组件之TextInput
编程之美
08-08 827
React Native常用组件之TextInput
基础篇章：React Native 之 TextInput 的讲解
非著名程序员
12-11 2972
今天我们讲解的是React Native基础系列之TextInput的讲解，如果想学习更多的开发知识或者移动开发文章，欢迎大家关注我的微信公众号：非著名程序员（smart_android）。 TextInput 是一个允许用户输入文本的基础组件。它有一个onChangeText的属性，该属性接受一个函数，每当文本输入发生变化时，此函数就会被调用。它还有一个onSubmitEditing的属性，当文本
React Native 实现 Toast 弹出框的示例与自定义
在ReactNative中，实现Toast的功能需要适配不同的平台，并使用Animated库和View组件来实现Toast的出现和隐藏效果。通过自定义Toast组件，我们可以使Toast在Android和iOS中都能运行，并具有相同的运行效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值