我需要在html输入元素(搜索域)上使用键盘激活光标.

它在使用鼠标时工作得很好,但由于WCAG的要求,我需要使用键盘使其完全工作.

https://stackblitz.com/edit/angular-dukfxf?file=src%2Fapp%2Fapp.component.ts

我几乎try 了所有方法,从定制的js代码到Angular 指令.

有什么 idea 吗?

enter image description here

推荐答案

您可以执行以下操作:

1. Add an identification to your input and use the event openedChange from mat-select

<mat-select (openedChange)="focus()">
  <input
    ...
    #exampleInput
   />
</mat-select>

2. Define the function focus() in your component and it would work

export class AppComponent {
  @ViewChild('exampleInput') searchElement: ElementRef;
  ...

  focus() {
    setTimeout(() => {
      this.searchElement.nativeElement.focus();
    }, 0);
  }
}

https://stackblitz.com/edit/angular-nscqdp?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html

Javascript相关问答推荐

序列化我的数据并发送httpPost请求后,控制器收到空参数

追踪执行顺序

在JavaScript中,是否有一种方法可以创建自定义thable,在等待某些代码后自动触发它?

为什么我达到了时间限制!?LeetCode链接列表循环(已解决,但需要解释!)

如何访问react路由v6加载器函数中的查询参数/搜索参数

React Native平面列表自动滚动

react 路由加载程序行为

从PWA中的内部存储读取文件

使用复选框在d3.js多折线图中添加或删除线条

如何禁用附加图标点击的v—自动完成事件

setcallback是什么时候放到macrotask队列上的?

如何在 cypress 中使用静态嵌套循环

如何使用JS创建一个明暗功能按钮?

当我try 将值更改为True时,按钮不会锁定

在VS代码上一次设置多个变量格式

Reaction-SWR-无更新组件

React:防止useContext重新渲染整个应用程序或在组件之间共享数据而不重新渲染所有组件

Node.js API-queryAll()中的MarkLogic数据移动

用另一个带有类名的div包装元素

使用createBrowserRoutVS BrowserRouter的Reaction路由