Ant-design-mobile: InputItem,type="phone" 在手机端输入时，光标位置错误

[sosohime]

• antd-mobile 版本：0.9.4
• 浏览器 (或标明是 react-native) 及其版本：chrome 55.0.2883.91
• 运行环境及其版本：Android 6.0.1

InputItem,type="phone"
在手机端输入时，光标位置错误

输入：1379
期望：光标在9后面
实际：输入9后光标位置移动到9前面

官网demo同样存在这种问题
https://mobile.ant.design/components/input-item/

[warmhug]

安卓 chrome 上确实有问题

[pingan1927]

具体哪个手机型号，用自带浏览器访问还是其他客户端？我自测了下Android支付宝客户端以及三星自带的浏览器都还算正常

[sosohime]

sony xperia z4
用浏览器访问的
chrome 55.0.2883.91

[NaNaNoShinkenNg]

三星 a9 pro
chrome 55.0.2883.91
确实存在这个问题。
拿华为用Chrome试了，也同样存在。

[pingan1927]

@sosohime @NaNaNoShinkenNg 那我找机器看看，近期解决

[sosohime]

@pingan1927 翻了一圈没找到移动光标在哪……
如果用到 setSelectionRange 这种方法的话，在安卓webkit(至少chrome有问题,另外真机测出华为畅想6S里webview也有问题)
解决方案是setTimeout(...,0)
可以参考下

[boneyao]

@sosohime 解决方案能详细一点吗？

[hellboyfeng]

我也有这样问题 小米5手机

[paranoidjk]

@pingan1927 https://github.com/ant-design/ant-design-mobile/issues/1162
https://github.com/ant-design/ant-design-mobile/issues/1165

[l19861225q]

So... how to fix?

[Unfantasy]

我也遇到了一个关于光标的问题:

• antd-mobile 版本：1.0.8
• 浏览器 (或标明是 react-native) 及其版本：支付宝10.0.19
• 运行环境及其版本：IOS10.3.2

InputItem,type="phone"
eg: 期望输入 15138912120
先输151912120 (忘记输38) 然后跳至1后面输38的时候输入一个数字之后光标就立马跳到最后了, 还要自己再把它移动回来输另一个数字 @paranoidjk @pingan1927

[sosohime]

So... how to fix?~~(>_<)~~

[silentcloud]

手机号码的键盘也是有问题的，不应该出现 X，* + 也没了

[silentcloud]

这个没法在组件层面修复，需要用户在 onchange 里实现，我自己在 2.0 上尝试写了一个demo，希望对大家有帮助，1.x 解决方案类似：

onPhoneChange = (value) => {
    const phoneRef = this.phone.inputRef.inputRef;
    let before = phoneRef.selectionStart;
    this.setState({
      phoneValue: value,
    }, () => {
      const after = phoneRef.selectionStart;
      const subValue = value.substr(before - 1, before);
      if (before !== after) {
        if (subValue && subValue.substr(0, 1) === ' ') {
          before = before + 1;
        }
        phoneRef.setSelectionRange(before, before);
      }
    })
  }