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

就像这样，它将输入中键入的“ x”更改为“ y” ...

let el = document.getElementById('t');

function changed(value){
  if (value.includes('x')) {
    let newValue = value.replace("x","y")
    el.value = newValue;
  }
}

<textarea type="text" id="t" onkeyup="changed(value)"></textarea>

Answer 2

仍有一些东西需要抛光，例如退格或输入，但您会明白。

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>

我可以在用户编辑输入字段后，如何操作显示的字符吗？

2 个答案: