打字稿 – 角度2设置焦点到另一个输入

发布时间：2020-12-17 08:12:15 所属栏目：安全来源：网络整理

导读：当某些事件发生时，我需要将焦点切换到输入元素。如何在角度2中做到这一点？例如： input (keyUp)="processKeyUp($event)"/input (focusme)="alert('i am focused')"/ 当第一个按下某个键时，我想要聚焦第二个输入框。我想我需要使用自定义事件(在片段中的f

当某些事件发生时，我需要将焦点切换到输入元素。如何在角度2中做到这一点？

例如：

<input (keyUp)="processKeyUp($event)"/>
<input (focusme)="alert('i am focused')"/>

当第一个按下某个键时，我想要聚焦第二个输入框。我想我需要使用自定义事件(在片段中的focusme)，但是我不知道在哪里或如何声明它，以及是否为它使用@Directive注释，或者以某种方式将其定义包含在组件中。简而言之，我被困了。

UPDATE

忘了提到，我知道我可以通过在html中使用局部变量来做到这一点，但是我希望能够从组件中做到这一点，我想要在触发focusme事件时能够执行复杂的逻辑，以便控制监听它可以确定它是否适用于他们。
谢谢！

你可以这样做只是将第二个输入作为变量传递给第一个

例如

HTML

<!-- We pass focusable as a parameter to the processKeyUp function -->
<input (keyup)="processKeyUp($event,focusable)"/>

<!-- With #focusable we are creating a variable which references to the input -->
<input #focusable />

后来你的js / ts

@Component({
  selector: 'plunker-app'
})
@View({
  templateUrl: 'main.html'
})
class PlunkerApp {

  constructor() {
  }

  processKeyUp(e,el) {
    if(e.keyCode == 65) { // press A
      el.focus();
    }
  }
}

el是原始元素，所以可以使用纯JavaScript。

这是一个plnkr，所以你可以看到它工作。

我希望它有帮助。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!