Vanilla JavaScript：拦截输入的按键并更改按键值

Question

我希望拦截一个输入框中键入的字符并将其更改为其他字符。

例如，每次按键时我想模拟键入数字 1。

我想到了类似以下的代码：

           //this example does not work, it will trigger an endless loop

            Array.from(document.querySelectorAll('.onlyOne')).forEach(input =>
                               input.addEventListener('keydown', (event) => {      
                                event.preventDefault();
                                event.srcElement.dispatchEvent(new KeyboardEvent('keydown', { 'key': 49 }));

                            });
                        }
                    );

我不能只使用event.target.value += 1;来添加1，因为当输入框中已经有文本并且光标不在文本末尾或用户用鼠标选择了所有文本时，如果在输入框末尾添加文本，它会显得不自然。

请问我能否帮您做些什么呢？

- Pipo

---

为什么不能在按下任意键时将“1”添加到输入值中呢？this.value += "1" - vsync

当输入框中已经有文本且光标不在文本末尾或用户使用鼠标选择了所有文本时，使用@vsync添加文本到输入框末尾会显得不自然。 - Pipo

“[].forEach.call” 不会执行任何次数，这个事实怎么样？ - Kutyel

你应该检查哪个键被按下了，因为现在的编码方式会导致无限循环（如果它能正常工作的话，请参见上面的注释）。 - vsync

@Kutyel，我修改了这段不寻常的代码，以使问题更加明确。 - Pipo

Answer 1

在触发相同事件的事件中分派事件，会创建一个无限循环，导致Range Error: Maximum call stack size exceeded.

不要使用该事件，只需在每个键按下时将光标位置加1即可。

Array.from(document.querySelectorAll('.onlyOne')).forEach(input =>
  input.addEventListener('keydown', (event) => {
    event.preventDefault();
    event.target.insertAtCaret('1');
}));


HTMLInputElement.prototype.insertAtCaret = function (text) {
  text = text || '';
  if (document.selection) {
    // IE
    this.focus();
    var sel = document.selection.createRange();
    sel.text = text;
  } else if (this.selectionStart || this.selectionStart === 0) {
    // Others
    var startPos = this.selectionStart;
    var endPos = this.selectionEnd;
    this.value = this.value.substring(0, startPos) +
      text +
      this.value.substring(endPos, this.value.length);
    this.selectionStart = startPos + text.length;
    this.selectionEnd = startPos + text.length;
  } else {
    this.value += text;
  }
};

<input class='onlyOne' value="foo">

HTMLInputElement.prototype.insertAtCaret是从这个答案中获取的：https://dev59.com/JGgu5IYBdhLWcg3wy558#19961519

如果您不想扩展内置原型，可以将其更改为普通函数。

- baao

---

感谢回答，但是当输入框中已经有文本且光标不在文本末尾或用户用鼠标选择了所有文本时，在输入框末尾添加字符会显得不自然。 - Pipo

@VivienPipo编辑了答案以满足新的要求。 - baao

恭喜！ - Pipo