RN——TextInput 文本框删除最后一个字符，光标移动到组件末尾

最新推荐文章于 2024-03-26 13:33:38 发布

脱发队长

最新推荐文章于 2024-03-26 13:33:38 发布

阅读量344

点赞数

文章标签： react native react.js javascript

本文链接：https://blog.csdn.net/manong__/article/details/128241223

版权

问题表现

初始未输入字符时，输入框光标正常居中
输入字符后，输入框光标正常位于文字之后
删除字符同时还有剩余文字，输入框光标正常位于文字之后
删除最后一个文字后，输入框光标跳动到组件末尾

复现步骤

使用 react-native 的 TextInput 组件
设置输入框的文本居中 style: { textAlign: 'center'}

问题解决

TextInput 组件设置为多行文本
添加属性 multiline={true}

<TextInput
    placeholder={'请输入20位邀请码'}
    placeholderTextColor={xxx}
    fontSize={xxx}
    onChangeText={this._onChangeText}
    maxLength={20}
    value={this.state.inviteCode}
    underlineColorAndroid={'transparent'}
    disableFullscreenUI={true}
    multiline={true} // 忽略其他属性就好，只有这行能解决本文所述问题
/>