我是一名刚从大学毕业的新前端开发人员。这是我第一次遇到这样的问题。我正在处理一个同事的代码，所以我不想过多地更改他的代码，只是修复他的代码中的一个问题，而不是完全修改它。
我们有 3 个输入样式字段:input、phone、number
- 输入字段是一个自由文本字段，用于输入姓名等内容。
- 电话字段是一个纯数字字段，它将数字序列格式化为 10 位电话号码，格式为 (XXX)XXX-XXXX，实时显示在屏幕上供用户使用。
- 数字字段用于诸如 ssn 之类的地方，其中只允许使用数字。非数字字符被拒绝
所有这三个字段都扩展了一个基本格式字段。在这个基本格式字段中，我们有一个 onKeyUp(event: Event) 函数，它会在用户每次键入一个字符时调用一个格式函数。我们这样做是为了在他们键入时在电话字段中添加 ( ) 之类的内容，并在他们键入时从数字字段中删除非数字字符。
问题来了
通过在每次击键时调用格式函数，我们的光标会在每次击键后跳到输入字段中值的末尾。因此，如果我在输入字段中有一个预先存在的名称:“John Smith”，我想返回并编辑该字段以使其看起来像“John Joe Smith”，每次击键后我的光标都会跳到字符串的末尾。
我的目标是保持击键时的格式，以便电话号码继续被格式化并且数字字段实时拒绝非数字值，但我也希望允许中间值编辑而不将光标踢到每次击键后值的结尾。
有没有办法在我调用格式之前捕获我的光标位置，然后在格式之后返回我的光标位置？或者其他可能很容易实现的解决方案？
最佳答案
您可以从触发事件的元素中获取插入位置，然后使用 substring 在该位置插入文本。这是我必须处理插入制表符 (\t) 的项目的片段:
case 9: // Insert tab key at caret location
e.preventDefault();
var caret = e.target.selectionStart;
e.target.value = e.target.value.substring(0, caret) + '\t' + e.target.value.substring(caret);
break;
关于javascript - 在 onKeyUp() 上格式化导致光标跳到输入字段的末尾，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43811020/