版权声明:如要转发,请注明出处,小小喵的微博 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),
})
}
}
实现效果:
因为手机线上效果,页面上有文字,不知道让不让发。我就录了个电脑的视频,把其他信息去掉了,大家简单看下效果。