javascript - 格式化文本字段时 react 光标跳跃

Question

我知道这方面有很多主题，我已经尽了最大努力阅读并实现了他们的解决方案，但我就是无法让它正常工作

我正在尝试格式化电话号码，以便它以某种格式显示。

我创建了一个演示，展示它在我的应用程序中的工作原理。 https://codesandbox.io/s/dank-leaf-94s3w?file=/src/App.js

编辑:抱歉要多描述一下这个问题。

当您只需从前到后输入 # 时，一切正常

但是当我尝试修改中间的数字时，每次输入后光标都会跳到末尾。

谢谢

Answer 1

嗨，问题是您传递了一个新值，这就像输入整个值一样。这将导致光标移动到末尾。

您可以通过请求窗口动画帧并将光标移回原来的位置来克服它:

const caret = target.selectionStart;
    const element = target;
    window.requestAnimationFrame(() => {
      element.selectionStart = caret;
      element.selectionEnd = caret;
    });

这是您的 sandbox 的副本.