编辑 textArea 时光标跳到最后一行的问题答案

【问题标题】：Issue with cursor jumping to last line on editing textArea编辑 textArea 时光标跳到最后一行的问题
【发布时间】：2021-07-14 18:52:29
【问题描述】：

问题陈述：

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

问题：

每当我们输入一个金额时，比如 12345，按 Enter 并输入 20000，然后返回编辑上一个值（12345），光标跳到最后一行。

根本原因：

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

演示：

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

珍惜你的时间。

【问题讨论】：

【解决方案1】：

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

修改前

savedPosition = textarea.selectionEnd

修改后

textarea.selectionEnd = savedPosition

考虑字符串

123 美元

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

1,423 美元

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

【讨论】：

如果你设置一个简单的状态，它不会移动到结束。这是不同的
实际上，您实际上必须根据对文本所做的更改来转换光标位置。我想如果你应用这个，你会得到一个解决方案
你能举个例子吗？我很混乱。将不胜感激一些投入。这就是为什么这么好。
textarea的内容在没有用户输入的情况下发生变化的场景分为三种。 1. 输入数字时添加/更新逗号位置 2. 为新行添加美元 3. 删除特殊字符 4. 让我们忽略添加的 [a-z] 字符大小写在所有这些情况下，光标都会移动到末尾。尝试这个。第一行$ 12 第二行$ 123 现在上去，开始输入数字。请注意，添加逗号时，光标会移动。之后，所有输入（在第一行末尾）都会更新逗号位置，因此光标会移动。如果您在开始时输入，内容会在 3 个字符后添加。
这实际上是一个相当棘手的问题，因为您实际上不会知道逗号的插入位置。一个函数为您提供计算的输出。因此，您将不得不使用差异工具。检查这个fiddle 我已经解决了添加$ 时的光标问题，但是对于逗号添加它似乎更复杂。祝你好运