當用戶輸入文本並點擊時觸發事件輸入或點擊數據列表中的項目

-1

我有一個用於輸入多個電子郵件的輸入字段以及出現在數據列表中的以前使用的電子郵件列表。每次用戶在框中輸入文本並點擊輸入，或者從數據列表中選擇一個值時，我都想調用onNewToEmailAdded（）方法。我該怎麼做（我正在使用Angular 2）。此時，只有在從列表中選擇一個項目後，纔會調用該方法。當用戶輸入文本並點擊時觸發事件輸入或點擊數據列表中的項目

<input type="email" class="form-control" [(ngModel)]="nweEmail" (keyup.enter)="onNewToEmailAdded()" 
    list="toEmailsList" /> 
<datalist id="toEmailsList"> 
    <option *ngFor="let email of previousToEmails">{{email}}</option> 
</datalist>

來源

2017-07-19 Dan O' Leary

由於缺乏有關DataList控件的事件，你不能直接當點擊列表上的電子郵件，因此您的解決方案只工作在輸入選擇後的按鍵觸發事件。但是，你仍然可以使用，如輸入元素上的（輸入）事件中使用一種變通方法：

<input type="email" class="form-control" (input)="compareInput($event.target.value) "[(ngModel)]="nweEmail" (keyup.enter)="onNewToEmailAdded()" 
    list="toEmailsList" /> 
<datalist id="toEmailsList"> 
    <option *ngFor="let email of previousToEmails">{{email}}</option> 
</datalist>

此事件每次都會在輸入域有新的變化，在這一點上田返回值被觸發。從那裏你可以比較previousToEmails列表返回的值，如果是匹配，你可以在點擊datalist上的元素時做你想做的事情。

compareInput(value) { 
//if value is in the list do something 
}

還要記住，通過這樣做，當用戶鍵入電子郵件是在previousList不選擇它，因爲它被選爲這可能會導致奇怪的，一旦它到達的最後一個字符就會觸發事件用戶的行爲。

來源

2017-07-19 14:14:44 BogdanC

當用戶輸入文本並點擊時觸發事件輸入或點擊數據列表中的項目

回答

相關問題