javascript - Vanilla javascript : intercept key on input and change key value

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因为当input中已经有文本并且光标不在文本末尾或用户用鼠标选择了所有文本时，如果在input末尾添加文本，它不会自然地起作用

你能帮帮我吗？

Answer 1

通过从导致同一事件的事件中分派(dispatch)事件，您将创建一个无限循环，这将导致 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://stackoverflow.com/a/19961519/3993662

You can change that to a normal function if you don't want to extend the built in's prototype .