Angular 从 ngModel 获取键入的字符并在输入中替换它

Posted 2023-05-07

【中文标题】Angular 从 ngModel 获取键入的字符并在输入中替换它

【英文标题】：Angular get typed character from ngModel and replace it inside the input

【发布时间】：2018-08-08 21:17:28

【问题描述】：

如何获取新输入的字符（不是 ngModel 的全新值）然后对其应用逻辑，然后为 ngModel 返回一个新值？

示例： 假设当用户在输入中键入时，我们希望获取他键入的新字符，然后将其更改为某些内容并将其附加到之前的值ng模型。试过 keypress 和 onModelChange 但似乎没有用

<ion-textarea #chat_input
     (ngModelChange)="modelChanged($event)"
     placeholder="Text Input"
     [ngModel]="editorMsg"
     (keyup.enter)="sendMsg()"
     (ionFocus)="onFocus()">
</ion-textarea>

而我的方法是这样的：

modelChanged(e)
        // e is the new value of editorMsg and not the new typed character, if I get the new character I can do
this.editorMsg+=e;

但我只能从modelChange 获得新输入的值，我怎样才能只获得新输入的字符？

【参考方案1】：

我相信您正在寻找的是keyup 事件。

你可以有类似的东西

<input (keyup)="onKey($event)">

然后在你的组件中

onKey(event: any)  
    console.log(event.key)

这里的重要一点是使用event.key 而不是event.target.value。如果您使用后者，它总是会给您输入值而不是输入键

您可以在here 获得更多信息，我从那里获得了相关信息

【讨论】：

感谢您的回答，但是对于 keyup，如果我按退格键或回车键或空格键，我会得到一个字符串，上面写着 Space 或 Enter...等，这对我不起作用

我们的目标是能够在输入中的每次按下时捕获单个键。然后你可以有一个正则表达式来过滤掉你不想要的那些。使用简单的正则表达式，您可以立即从您的方法中返回，以防字符不是预期的字符之一。

【参考方案2】：

您可以执行以下操作：

modelChanged(e)
  let lastChar;
  if (e.length) 
      lastChar = e[e.length -1]; // this gets the last character of the srting..
     // do you logic with lastChar..
   

【讨论】：

但这不一定会给你最后输入的字符，对吗？例如，如果用户键入退格键，这将为您提供字符串中当前的最后一个字符，而不是最后一个 typed 字符。

【参考方案3】：

它使用(ngModelChange) 工作。看到这个StackBlitz

component.html

<input [ngModel]="name" (keypress)="onKeypress($event)">

component.ts

export class AppComponent  
  name = 'try me';

  onKeypress(event: KeyboardEvent) 
     console.log(event);
     // Do what you want...
     this.name = event.key;
     event.preventDefault();
  

【讨论】：

替换只是一个例子，期望的行为是当输入某些内容时，我们执行我们想要的任何逻辑并将值显示到输入，ngModelChange 我们只得到新的name而不是新角色

你能说得更具体些吗？我不明白为什么它在你的情况下不起作用。

好吧，明确一点，如果用户按下a，我希望能够获取新字符，然后我想获取a，然后在应用我的逻辑后将结果发送到@987654329 @

抱歉不清楚，请查看已编辑的问题以获得更多说明

编辑以根据按下的键执行逻辑