Question

我是一名刚从大学毕业的新人。这是我第一次遇到这样的问题。我正在研究同事代码，所以我不想过多地修改代码，只需修改代码问题而不用彻底改造代码。

我们有3个输入样式字段：输入，电话，号码

输入字段是用于名称之类的自由文本字段。
电话字段是一个仅限数字的字段，用于将数字序列格式化为10位数的电话号码，并在屏幕上为用户实时显示（XXX）XXX-XXXX格式。
数字字段用于ssn之类的内容，只允许使用数字。非数字字符被拒绝

这三个字段都扩展了基本格式字段。在这个基本格式字段中，我们有一个onKeyUp（event：Event）函数，每次用户键入一个字符时都会调用一个格式函数。我们这样做是为了在键入时在手机字段中添加（），并在键入时从数字字段中删除非数字字符。

这是问题

通过在每次击键时调用format函数，我们的光标在每次击键后跳转到输入字段中值的末尾。因此，如果我在输入字段中有一个预先存在的名称：＆＃34; John Smith＆＃34;我想回去编辑那个字段，看起来像＃34; John Joe Smith＆＃34;每次击键后，我的光标会跳到字符串的末尾。

我的目标是保持按键上的格式化，以便继续格式化电话号码，并且数字字段实时拒绝非数字值，但我也想允许中值编辑而不将光标踢到每次击键后的值结束。

有没有办法在我调用格式之前捕获我的光标位置，然后在格式之后返回我的光标位置？或者另一种可能很容易实现的解决方案？

Answer 1

您可以从触发事件的元素中获取插入位置，然后使用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;

在onKeyUp（）上格式化，使光标跳转到输入字段的末尾

1 个答案: