gpt4 book ai didi

javascript - 在 onKeyUp() 上格式化导致光标跳到输入字段的末尾

转载 作者:行者123 更新时间:2023-11-30 15:20:30 26 4
gpt4 key购买 nike

我是一名刚从大学毕业的新前端开发人员。这是我第一次遇到这样的问题。我正在处理一个同事的代码,所以我不想过多地更改他的代码,只是修复他的代码中的一个问题,而不是完全修改它。

我们有 3 个输入样式字段:input、phone、number

  1. 输入字段是一个自由文本字段,用于输入姓名等内容。
  2. 电话字段是一个纯数字字段,它将数字序列格式化为 10 位电话号码,格式为 (XXX)XXX-XXXX,实时显示在屏幕上供用户使用。
  3. 数字字段用于诸如 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com