Изменение напечатанного символа в angular с помощью события нажатия клавиши или нажатия клавиши

Question

У меня есть объект с символом, сопоставленным с другим символом.

 let m = {
    a : 'z',
    b : 'y',
    c : 'x',
    d : 'w',
    ...
    z : 'a'
 }

Я хочу поле ввода в angular 9, чтобы при вводе пользователем a вместо a , тот символ, который сопоставлен с key a, напечатан в поле.

Answer 1

Вы хотели бы написать функцию для (входного) события, которое связывается с элементом textarea, чтобы вы могли как читать, так и записывать его значение

  <textarea #box (input)="catchAndRelease(box)" cols="32" rows="8"></textarea>

  // your map
  transformers = [
    {from: 'a', to: 'z'},
    {from: 'b', to: 'y'},
    {from: 'c', to: 'x'},
    {from: 'd', to: 'w'},
    {from: 'z', to: 'a'}
  ];

  // fires on every (input) event
  catchAndRelease(el: HTMLTextAreaElement) {

      const keyPressed = el.value.split('').pop();
      let transformedKey = keyPressed;

      this.transformers.some(t => {
          if (t.from == keyPressed) {
          transformedKey = t.to;
          return true;
      }
      return false;

  });

  // write the new value back into the <textarea> element
  const newString = el.value.substring(0, el.value.length-1) + transformedKey;
  el.value = newString;

}

см. это в действии: https://stackblitz.com/edit/angular-nkhnec

Answer 2

Я предлагаю вам взглянуть на keyCodes, вместо использования букв в качестве ключей, но взяв этот пример

Вы можете поймать событие keydown на входе с помощью Angular, тогда, если нажатая клавиша keyCode находится на вашей карте, вы можете запретить нормальное поведение keydown, добавив вашу букву вместо нажатой.

Обратите внимание, что я выбрал keydown поскольку оно срабатывает до обновления значения, поэтому, если вы предотвратите это, вы можете манипулировать выводом. использование keyup вызовет ваш обработчик после того, как будет нажата клавиша, поэтому у вас будут обе буквы на вашем вводе

Если вы не хотите использовать keyCode, тогда вы можете использовать event.key, результат будет тот же