部分代码参考 ant design input 组件源码
主要是在 input 输入内容后计算光标位置然后通过 selectionStart 和 selectionEnd 进行更新
先看效果图
处理光标前 input 表现,光标错位的原因参考 https://segmentfault.com/a/1190000016758141
处理光标后 input 表现
import React from 'react'
const inputWrapperStyle = {
margin: '10%',
boxSizing: 'border-box'
};
export default class CardNo extends React.Component {
constructor(props) {
super(props)
this.state = {
cardNo: '',
}
}
handleCardNoChange(e) {
const element = e.target;
const {
value // 可以在这里 debugger 一下,观察一下 react 中受控组件中,元素 value 的值和该元素对应 state 的差别
} = element;
con