Question

使用引人注目的TurboTable的内嵌编辑，我试图通过单击Enter键执行一种方法。这是下面的代码：

onKeyPress

问题是方法keypress不能通过单击enterKey来执行。因此，我尝试使用<td pEditableColumn> <p-cellEditor> <ng-template pTemplate="input"> <input type="text" [(ngModel)]="rowData.vin" (keypress)="onKeyPress($event)"> </ng-template> <ng-template pTemplate="output"> {{rowData.vin}} </ng-template> </p-cellEditor> </td>进行以下操作：

onKeyPress

我注意到，方法function isNumber(evt) { evt = (evt) ? evt : window.event; var charCode = (evt.which) ? evt.which : evt.keyCode; if (charCode > 31 && (charCode < 48 || (charCode > 57 && charCode < 96) || charCode > 105)) { document.getElementById("errorNumber").classList.remove('error-hide') return false; } document.getElementById("errorNumber").classList.add('error-hide') return true; }是通过单击Enter键之外的任何按钮来执行的。

Answer 1

我认为onEditComplete事件捕获了Enter键。选中“事件”下的https://www.primefaces.org/primeng/#/table。

要按Enter键调用函数，您可以执行以下操作：

<p-table ... (onEditComplete)="onEditComplete($event)">
...
<td [pEditableColumn]="rowData" pEditableColumnField="'vin'">

In your component:
onEditComplete(event) {
  console.log(event.data);
}

Answer 2

我尝试使用keydown代替Keyup，并且效果很好

<td pEditableColumn>
   <p-cellEditor>
     <ng-template pTemplate="input">
        <input type="text" [(ngModel)]="rowData.vin" 
               (keydown.enter)="onKeyDown($event)">
     </ng-template>
     <ng-template pTemplate="output">
                {{rowData.vin}}
     </ng-template>
   </p-cellEditor>
</td>

turboTable启动输入enterKey

2 个答案: