javascript - 编辑 textArea 时光标跳到最后一行的问题

问题陈述：

我正在尝试构建这个组件，用户可以在其中输入美元金额，按 Enter 并可以继续输入更多内容。

问题：

每当我们输入一个数字 12345 时，按回车键并输入 20000 并返回编辑上一个值 (12345)，光标会跳到最后一行。

根本原因：

我认为这是由于getValue代码中的功能而发生的（禁用此功能使其完美）。

演示：

有人可以帮我识别/修复我做错了什么吗？我希望能够在没有光标跳动的情况下编辑任何行（格式化）。

珍惜你的时间。

标签： javascriptreactjstextarea

在textarea中，如果您更新值，光标将移动到末尾。如果要保持光标位置，可以在更改 value 属性之前保存它，然后在更改后更新它。

修改前

savedPosition = textarea.selectionEnd

修改后

textarea.selectionEnd = savedPosition

考虑字符串

123 美元

光标在一到两个位置之间 - 3，现在，如果我输入 4 ，新的光标位置将是位置 - 4。字符串将是

1,423 美元

粘贴时，旧光标位置为 4（插入后），由于逗号在 3 之前添加，光标位置增加了 1。您必须在更改后将光标设置为 5。由于反应异步更新文本区域，我不熟悉我无法提供解决方案。但是之前保存光标位置，并跟踪您所做的更改并相应地转换光标位置，最后在修改文本区域值后更新光标位置。