Ant-design-mobile: 受控模式下 input rerender 造成光标位置丢失

Created on 25 Apr 2017  ·  5Comments  ·  Source: ant-design/ant-design-mobile

antd示例网页上就可以看到:https://mobile.ant.design/components/input-item-cn/
inputItem类型为phone和bankCard时,如果从前几位开始删除,光标会自动跳转到最后
111
222

help wanted bug

Most helpful comment

  • 不只 phone 和 bankCrad 有问题,只要是输入被格式化处理和修改都会有这个问题。
  • 根本原因是,受控模式下,在inputonChange 里面用正则做了对 value 做了处理,会造成 第二次
    rerender,从而光标的位置被重置了,暂时没什么好方法修复

https://github.com/facebook/react/search?q=cursor&type=Issues&utf8=%E2%9C%93

All 5 comments

Hello @jackYouth, your issue has been closed because it does not conform to our issue requirements. Please use the Issue Helper to create an issue, thank you!

  • 不只 phone 和 bankCrad 有问题,只要是输入被格式化处理和修改都会有这个问题。
  • 根本原因是,受控模式下,在inputonChange 里面用正则做了对 value 做了处理,会造成 第二次
    rerender,从而光标的位置被重置了,暂时没什么好方法修复

https://github.com/facebook/react/search?q=cursor&type=Issues&utf8=%E2%9C%93

@pingan1927 这里如果不从 react 的角度上找解决办法,还一种就是利用 selection 和 range api 保存与恢复光标位置,不过这个 api 差异和兼容性问题比较复杂

Trace #810

Was this page helpful?
0 / 5 - 0 ratings

Related issues

izee picture izee  ·  4Comments

myLazyProgrammer picture myLazyProgrammer  ·  4Comments

lixiaoyang1992 picture lixiaoyang1992  ·  3Comments

tolg picture tolg  ·  4Comments

18019675002 picture 18019675002  ·  4Comments