使用keypress或keyup事件更改角度中键入的字符

Question

我有一个对象，其中一个字符映射到另一个字符。

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

我想要一个角9中的输入字段，这样当用户键入a时，就会在字段中键入映射到key a的字符，而不是a。

Answer 1

我建议您查看keyCodes，而不是使用字母作为键，但以为例

您可以用Angular捕捉输入上的keydown事件，然后，如果按下键的keyCode在您的映射中，您可以阻止keydown的正常行为，添加您的字母而不是按下的字母。

请注意，我选择了keydown，因为它在值更新之前激发，所以如果您阻止它，您可以操纵输出。使用keyup将在按键后调用处理程序，因此您的输入中将同时包含两个字母

如果你不想使用keyCode，那么你可以使用event.key，你会得到相同的结果

Answer 2

您想要在(input(事件上编写一个绑定到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