react input 格式化后光标错位

最新推荐文章于 2023-05-24 11:12:20 发布

你的微笑像拥抱

最新推荐文章于 2023-05-24 11:12:20 发布

阅读量1.4k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/dfydn/article/details/105809840

版权

部分代码参考 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;

        const {