我可以在用户编辑输入字段后操纵显示的字符吗答案

【问题标题】：Can I somwhow manipulate the character displayed after the user edited an input field我可以在用户编辑输入字段后操纵显示的字符吗
【发布时间】：2019-01-31 21:23:37
【问题描述】：

我是否能够使用简单的事件处理程序来操作输入机制？想象一下我有一个简单的文本区域

<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() 函数，但这只是返回 nothing。

欢迎每一个想法和每一个经验！

【问题讨论】：

标签： javascript events event-handling dom-events

【解决方案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;
  
});

&lt;textarea id='t'&gt;&lt;/textarea&gt;

【讨论】：

总是一个 X 只是一个例子。我正在寻找一个通用的解决方案。
所以 X 是动态的并且可能会在用户输入文本时发生变化？
多或少。我想在输入的文本之前和之后插入 x，这样如果我点击“c”，我将在当前插入符号位置得到“xcx”
好的，这一切都清楚了。我会尽快更新我的答案！

【解决方案2】：

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

let el = document.getElementById('t');

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

&lt;textarea type="text" id="t" onkeyup="changed(value)"&gt;&lt;/textarea&gt;

【讨论】：

替换值看起来很棒！但是我需要它来处理大量文本，那么迭代如此大量的数据真的是唯一的选择吗？在不知道插入符号位置的情况下，我无法识别必须在哪个位置更改文本。扫描整个文本将是唯一的选择。