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

前端之家收集整理的这篇文章主要介绍了打字稿 – 角度2设置焦点到另一个输入前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当某些事件发生时,我需要将焦点切换到输入元素。如何在角度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,所以你可以看到它工作。

我希望它有帮助。

猜你在找的Angularjs相关文章