javascript - 我可以如何操作用户编辑输入字段后显示的字符

Question

我可以使用简单的事件处理程序来操纵输入机制吗？想象我有一个简单的文本区域

<textarea id='t'></textarea>

有没有办法改变用户按下按键后显示的字符的值？

document.getElementById('t').addEventListener("change", function(ev) {
  var ev = ev || window.event;
  // something like ev.return("X" + ev.key + "X") ?
});

这样一来，无论用户最初按下哪个键，实际插入符位置处的字符总是会被两个 X 包围？我知道，有一个 ev.preventDefault() 函数，但这只是返回什么都没有。

欢迎每一个想法和每一次经验!

Answer 1

还有一些东西需要完善，例如退格键或回车键，但您明白了。

document.getElementById('t').addEventListener("keydown", function(ev) {
  ev.preventDefault();
  let textarea = document.getElementById('t');
  let cursorPos = textarea.selectionStart;

  let oldText = textarea.value;
  let insertText = 'x' + ev.key + 'x';
  let newText = [oldText.slice(0, cursorPos), insertText, oldText.slice(cursorPos)].join('');

  textarea.value = newText;
  
});

<textarea id='t'></textarea>