Можно ли как-то манипулировать символом, отображаемым после того, как пользователь отредактировал поле ввода

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

Есть еще кое-что для полировки, например, backspace или enter, но вы поняли идею.

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>

Answer 2

Вот так, и это заменяет '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>