代码之家 › 专栏 › 技术社区 › Sletheren

Angular从ngModel中获取类型化字符并在输入中替换它

input angular javascript

Sletheren · 技术社区 · 7 年前

如何获取新类型的字符(而不是ngModel的整个新值),然后对其应用逻辑,然后为ngModel返回新值?

例子: 比方说,当用户在输入中键入我们想要获取的 新建角色 然后他键入并将其更改为某物,并将其附加到ngModel的前一个值中。尝试 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 如何仅获取新键入的字符?

3 回复 | 直到 7 年前

Hugo Noro 7 年前

我相信你要找的是 keyup 事件

你可以有这样的

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

然后在组件中

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

这里重要的一点是使用 event.key 而不是 event.target.value . 如果使用后一个,它将始终为您提供输入值,而不是输入键

您可以获得有关所需内容的更多信息 here ,我从那里得到了相关的信息

callback 7 年前

您可以执行以下操作:

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..
   }
}

Noémi Salaün 7 年前

它使用 (ngModelChange) . 看到这个了吗 StackBlitz

组成部分html

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

组成部分ts

export class AppComponent  {
  name = 'try me';

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

推荐文章

Thinkpad · Excel引用基于字符串的范围

2 年前

DwightD · Python 3中的用户输入和排序列表

6 年前

Hans Daigle · Python交互式控制台使用curses lib getstr()函数不等待用户输入

6 年前

ÐÐ¸ÐºÐ¸ÑÐ° Ð¨Ð¸ÑÐºÐ¸Ð½ · 如何从字符串(Python3)创建函数[已关闭]

6 年前

Wacky Mode-On · Python:3-在找到关键字后将字符串设为变量?

6 年前

P S · 在laravel 5.5中输入不起作用时重定向回

6 年前

Paul · 如何在输入值中包含图像

6 年前

Mose · c++中带有输入函数的Lambda auto给出错误

7 年前

Henri Wurm · 首先将第一个输入保存到文件夹中,然后引用它

7 年前

Andres Concha · 如何使用Vue设置和获取输入组件的值。js?

7 年前