react native TextInput输入限制字数长度在安卓和iOS设备上部分系统键盘输入问题

前奏

对于正在学习RN和已经在RN这条路上摸爬滚打很久的看官应该都知道，虽然RN的跨平台做的很不赖，但是也有一些小细节是无法兼顾的，今天兄弟就遇到了一个小问题。（小问题有时候却很致命）。

问题描述

安卓和iOS很多机型上在输入汉字的过程中会出现将字母（拼音）先输入到输入框中参与计算，一般情况下不会有问题，但如果要做字数限制时问题就出现了。例如，限制只能输入10个字符。大部分人的做法是给TextInput加MaxLength={10}来限制字数，这看起来也十分合情合理，没有任何怀疑，毕竟这是官方提供的属性方法。但恰恰是这个属性导致在输入时出现超界问题。比如下图中，当先输入6个汉字，再输入2个字“测试”的时候，拼音字母 "cesh" 参与计算，已经达到了限制的10个字符，因此导致无法输入10个汉字就不能在继续输入了。

这看似是个小问题，但对于使用app的用户来说，体验就特别差了，顾客就是上帝，上帝不满意那问题是不是很大呢！

解决方法

当然，问题描述清楚了，就得解决。经过仔细端详，终于找到了解决方法。毫不吝啬的分享给各位看官，如果觉得不肖，可以忽略。下面则是解决方法

最后

虽然是个小问题，但是搜遍全网都没找到对症的猛药,在此做个好人好事，希望能帮到各位有需求的看官。

 {this.setState({wordValue: text}, () => {this.setState({ surplusLen: defaultLen - text.length });});}}keyboardType='default'value={wordValue}placeholder='请输入'placeholderTextColor={fontColorSecDeepGray}/>{surplusLen}{surplusLen < 0 &&{ backgroundColor: '#FFF272', padding: px2dp(16) }}>{ color: 'red', fontSize: px2dp(26) }}>输入内容字数不能超过{defaultLen}个}

解决后如下图：

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！