当用户输入文本并点击时触发事件输入或点击数据列表中的项目

-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

当用户输入文本并点击时触发事件输入或点击数据列表中的项目

回答

相关问题