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

Question

我知道有很多关于这方面的话题，我已经尽我所能阅读和实施他们的解决方案，但我就是无法让它正常工作

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

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

编辑：抱歉再描述一下这个问题。

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

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

谢谢

标签： javascriptreactjsreact-hookscursor-position

Answer 1

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

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

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

这是您的沙盒的副本。