如何绑定事件以在输入文本时获得通知

Posted 2023-02-23

【中文标题】如何绑定事件以在输入文本时获得通知

【英文标题】：how to bind on an event to get notified as the text is being entered

【发布时间】：2021-07-06 17:18:13

【问题描述】：

我正在学习如何在输入 html 标记上绑定一些事件。所以如下面发布的html文件所示，以下状态有绑定

(onchange) and (oninput)

当我运行应用程序时，我在输入字段中输入文本，但出现以下情况：

当我在输入字段中输入/键入文本时，未调用或执行 onInputFieldChanged 或 onInputFieldHasInput。请告诉我如何绑定 在输入标签上的事件上，以便在输入字段中输入文本时收到通知。换句话说，当我输入文本时，我希望调用相应的函数，输入的文本作为参数“事件”传递

请告诉我如何绑定事件，以便在输入文本时收到通知

html：

<span class="classDestinationLng" style="margin-right:10px">
  <label for="destinationLngLabel">destination Longitude:</label>
  <input (change)=onInputFieldChanged($event) (oninput)=onInputFieldHasInput($event)>
</span>
<span>
  <button>confirm</button>
</span>

组件：

import  Component  from '@angular/core';

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)
export class AppComponent 
  title = 'FormOnInputAndOnChange1';

  onInputFieldChanged(event: any) 
    console.log("onChangeEventReceived: ", event)
  
  onInputFieldHasInput(event: any) 
    console.log("onInputEventReceived: ", event)
  

【参考方案1】：

如果您想知道输入中是否存在数据，您可以使用 ngModel。让我举个小例子。

app.component.html

<input type="text" class="form-control" (input)="checkIfTextExists()" [(ngModel)]="name">

app.component.ts

  checkIfTextExists()
    if(this.name)
      console.log("Text Exists..");
      return;
    
     console.log("Text does not Exists..");
  

这里是演示link。

【讨论】：

拜托，我收到以下错误：无效元素没有结束标签“输入” 3

@user2121 试试这个

【参考方案2】：

使用输入事件捕获更改，如下所示

component.html

<input (input)="changeInput($event)" value="">

<input (input)="changeInputUsingModel()" value="" [(ngModel)]="inputValue">

组件.ts

export class AppComponent 
  inputValue: string;

  changeInput($event) 
    console.log($event.target.value);
  

  changeInputUsingModel() 
    console.log(this.inputValue);