如何在 Angular 9 中使用向上、向下、向左和向右箭头键导航动态输入和选择表内的字段？

Posted 2023-03-28

【中文标题】如何在 Angular 9 中使用向上、向下、向左和向右箭头键导航动态输入和选择表内的字段？

【英文标题】：How to Navigate the dynamic input and select field inside the table with UP, DOWN, LEFT and RIGHT arrow keys in Angular 9?

【发布时间】：2021-09-03 04:40:04

【问题描述】：

有多个输入字段并在表格内选择字段。所有这些字段都是在运行时动态创建的。需要使用向上、向下、向左和向右箭头键导航和聚焦输入或选择字段。我是 Angular 新手，帮助实现此功能。

表格 UI 屏幕

左箭头键

焦点应该从当前字段移到上一个字段

右箭头键

焦点应该从当前字段移到下一个字段

向上箭头键

焦点应该从当前字段移到上一行字段（上一行）

向下箭头键

焦点应该从当前字段移到下一行字段（下一行）

<tr                                                            
  *ngIf="item?.column?.parameters?.length==0 && !item?.column?.pre_defined && !rowparams?.picklist">
      <td *ngFor="let item of [].constructor(item?.column?.count); let i=index;">
          <input
             type="(rowparams?.data_type == 'DTYPE_DATE') ? 'date' : (rowparams?.data_type == 'DTYPE_NUMBER') ? 'number': (rowparams?.data_type == 'DTYPE_TIME') ? 'time': 'text'"
             id="rowparams?.rpp_id+'_'+'cpp'+i"
             (keyup)="updateEdited(rowparams?.rpp_id+'_'+'cpp'+i)"
             style="width:150px;"                                  
             (change)="updateEdited(rowparams?.rpp_id+'_'+'cpp'+i)"
             value="(rowparams?.values && rowparams?.values?.length > 0)? rowparams?.values[i]?.value : ''"                                                               
             (blur)="validateYes($event,rowparams?.data_type)"
                                                                        (keypress)="validateAlpha($event,rowparams?.data_type)" />
       </td>
   </tr>

   <tr class="testrowparams?.picklist"
       *ngIf="((!item?.column?.pre_defined)  || (item?.column?.pre_defined && item?.column?.parameters.length!=0)) && (rowparams?.picklist === true)">
        <td
           *ngFor="let params of item?.column?.parameters; let i=index;">
           <select
               *ngIf="rowparams?.picklist_values?.length!=0"
               style="width:150px;"
               id="rowparams?.rpp_id+'_'+params?.cpp_id"                                                  
               (change)="updateEdited(rowparams?.rpp_id+'_'+params?.cpp_id)">
               <option
                  *ngFor="let option of rowparams?.picklist_values"
                   value="option.name"
                   [selected]="option.id==((rowparams?.values && rowparams?.values?.length > 0)? rowparams?.values[i]?.picklist_id : '')">
                   option.name</option>
           </select>
         </td>
     </tr>

【参考方案1】：

你可以在下面这样监听键盘事件，我不会重写你的整个表单，这实际上是在另一个堆栈上回答的，但它是正确的答案。

@Component(
        ...
        host: 
            '(document:keydown)': 'handleKeyboardEvents($event)'
        
    )

export class MyComponent 
    ...
    handleKeyboardEvents(event: KeyboardEvent) 
        this.key = event.which || event.keyCode;
    

How can I listen for keypress event on the whole page?

https://angular.io/api/core/HostListener

【讨论】：

已经在我的代码中实现了这段代码，但是如何将焦点导航到下一个元素和下一行。在 JQUERY 中使用 next().find('input').foucs() 这样我如何在 Angular 中实现这一点？