css 向左向下箭头

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 向左向下箭头相关的知识,希望对你有一定的参考价值。

参考技术A 使用

当然,其他任意方向也是可以的,只需要控制旋转角度rotate即可。原理是构造了一个正方形,隐藏了其中的两条边left和bottom,然后进行旋转。

通过使用正方形左下两条边,并向下向右平移,再旋转,得到一个向下并居中的箭头

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

【中文标题】如何在 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 中实现这一点?

以上是关于css 向左向下箭头的主要内容,如果未能解决你的问题,请参考以下文章

css鼠标放上去把箭头变成手一样的样式怎么写

VIM

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

XMind 快捷键完整命令

Shell 学习 vim命令

vi/vim使用总结