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

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

前奏

对于正在学习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}
                  个
                
              
            }

          

解决后如下图:

 

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/993725.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-21
下一篇 2022-05-21

发表评论

登录后才能评论

评论列表(0条)

保存