我不知道为什么每次在输入元素中按ENTER键时,应用程序都会执行它在html中找到的第一个函数.
我该如何预防呢?
我尝试用(keyup.enter)事件做一些测试,但它首先执行第一个(点击)功能,然后是(keyup.enter)函数......
这是代码:
<form role="form" [formGroup]="FormOffertDetail" (keyup.enter)="checkKey()">
<p-dialog modal="modal" [(visible)]="displayModal_Duplicate" width="300" responsive="true">
<p-header>
Dupplica Offerta
</p-header>
<div class="form-group">
<label for="idCustomer">Selezionare il Cliente</label>
<!--<input formControlName="idCustomer" type="text" class="form-control input-sm" id="idCustomer" placeholder="" required autofocus>-->
<select id="idCustomer_dup" class="form-control" formControlName="idCustomer_dup" [(ngModel)]="idCustomer_dup">
<option [value]="c.idCustomer" *ngFor="let c of listCustomers">
{{c.businessName}}
</option>
</select>
</div>
<p-footer>
<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
<button class="btn btn-primary btn-space" (click)="do_OffertDuplicate()"><i class="fa fa-copy fa-lg" aria-hidden="true"></i> Dupplica</button>
<button class="btn btn-danger btn-space" (click)="displayModal_Duplicate=false"><i class="fa fa-trash-o fa-lg" aria-hidden="true"></i> Annulla</button>
</div>
</p-footer>
</p-dialog> …Run Code Online (Sandbox Code Playgroud) 我使用的是ES6风格的Angular 4.2.2。现在,当用户在字段具有焦点的情况下按ENTER键时,如何使我的代码运行功能时,我感到茫然。
现在,我的html看起来像这样。
<div class="box" id="redbox" class="app-flex-item"><!-- flex item -->
<input id="searchTermInput" class="search-input" ng-keydown="runSearch($event)">
</div>
Run Code Online (Sandbox Code Playgroud)
我的组件控制器看起来像这样。
@Component({
...
})
export class AppComponent {
runSearch(ev): void {
console.log("Run Search Invoked");
this.searchResultService.getHeroesSlowly().then(searchResponseResult => {
this.searchResponseResult = searchResponseResult;
this.searchResults = searchResponseResult.searchResults;
this.showDivider = true;
}
)
}
}
Run Code Online (Sandbox Code Playgroud)
不幸的是,每当我按下ENTER键时,我什至都看不到控制台输出“ Run Search Invoked”。
有谁知道如何监听输入组件上的输入事件?
任何帮助是极大的赞赏。