React Native 实现每4个数字或英文加一个空格的实现方法

版权声明：如要转发，请注明出处，小小喵的微博 https://blog.csdn.net/weixin_42881744/article/details/85600394

本人自己写出的实现代码，如果有更好的实现方式，希望大家能回复下，共同进步吧。

一、需要实现的功能
1、只能输入数字或者英文
2、最多输入16位
3、每输入4位自动加一个空格
4、删除空格后的第一个的数字或字母的时候，自动把空格删除
5、输入内容，文本框后面会出现关闭图标
先按照这个功能写下实现代码：

我这里使用React Native 编译成的h5页面，没有控制软键盘的弹出。
我这里使用的是普通的input标签，没有用TextInput。
我发现TextInput控制的软键盘类型并不能符合我这里的输入功能，如果只是纯数字的，其实用TextInput会更好些。

<View style={styles.inputCont}>
        <input
                id="bindInput" //为了解决手机适配问题
                type="text"
                maxLength="19"
                style={styles.editInput}
                placeholder='请输入16位密码，电子卡密码在订单内查询'
                value={inputValue}
                onChange={this.valueChange.bind(this, event)}
         />
        {inputValue.length > 0 && (
                <Image  //这里是关闭的图标
                  style={styles.close}
                  source={inputClose} //图标的url引入变量
                  onClick={this.onDeleteCode.bind(this)}
                />
        )}

然后放一下最主要的实现逻辑，我遇到最主要的适配问题，就是三星手机下，到第四位加空格的时候，第5位数字或者字母会跑到空格前面，以此类推，下面我针对这个问题，进行了光标定位功能

valueChange(e) {
    this.setState({
      errorMsg: '' //每次输入的时候，先清除错误提示信息
    });
    let text = e ? e.target.value : this.state.inputValue.substring(0, 18); //获取input框的输入信息
    if (text.length <= 19) {  //因为我是16位数字或字母，再加3个间隔空格，所以正好是19位
      //进行文本输入校验，不清除正则为什么这么写的，可以先去查一下正则的基本用法
      let inputValue = text.replace(/\s/g, '').replace(/[^\da-zA-Z]/g, '').replace(/([\da-zA-Z]{4})(?=[\da-zA-Z])/g, '$1 ');
      inputValue = inputValue.toLocaleUpperCase(); //小写字母变成大写字母
      this.setState({
        inputValue: inputValue.substring(0, 19),  // 赋值
      }, () => {
        this.setState({
          disabled: this.state.inputValue.length !== 19
        })
        //解决三星下光标问题，设置光标，永远放到字符的最后面
        let tObj = document.getElementById("bindInput"); //这里获取对象
        let sPos = this.state.inputValue.length;
        if (tObj.setSelectionRange) {
          setTimeout(() => {
            tObj.setSelectionRange(sPos, sPos);
            tObj.focus();
          }, 50)
        } else if (tObj.createTextRange) {
          var rng = tObj.createTextRange();
          rng.move('character', sPos);
          rng.select();
        }
      })
    } else {
      //解决三星手机输入异常问题
      this.setState({
        inputValue: inputValue.substring(0, 19),
      })
    }
  }

实现效果：
因为手机线上效果，页面上有文字，不知道让不让发。我就录了个电脑的视频，把其他信息去掉了，大家简单看下效果。