Question

如何通过在移动设备上按本机键盘返回键input来模糊button？

例如：

<input type="text" #search>

this.search.blur() //-- unfocus and hide keyboard

Answer 1

html文件

<input type="text"  #search (keyup.enter)="doSomething()">

.ts文件

import { Component, ViewChild, ElementRef} from '@angular/core';

  @ViewChild('search') search: ElementRef;

  doSomething(): void {
    this.search.nativeElement.blur()
  }

工作stackblitz

Answer 2

 <input type="text" #search (keyup.enter)="doSomething()">


     doSomething(): void {
       document.getElementById("search").blur();
    }

Answer 3

您可以使用keyup.<key>事件来这样做。要设置模糊效果，可以使用tabindex属性，有关更多信息，请参见this链接

示例

HTML

<input type="text" tabindex="focus" #search (keyup.enter)="doSomething()">

.ts

doSomething(): void {
    this.focus = -1;
}

Answer 4

根据我对问题的理解，Ebin的代码应该足够了。为了完整起见，以防万一其他人偶然发现了此帖子，并且只需要一些非常简单的内容，这也应该起作用。

如果总体目的是简单地模糊键的输入（或其他简单的绑定），然后对元素执行/模拟另一个动作，则无需在控件中使用ViewChild装饰器或其他方法。零件。

构建Ebin的代码：

HTML

<input type="text" #search (keyup.enter)="search.blur(); clickButton.click()">
<button #clickButton (click)="buttonClicked()" type="button">Hello</button>

.ts

buttonClicked() {
// do something
}

这是一个有效的堆叠闪电战，再次基于埃宾的答案：stackblitz

在这种情况下，仅在模板端使用元素引用。或者，也可以在此处分配对buttonClicked（）的方法调用，而不是调用clickButton.click（），尽管这可能取决于预期的行为。

如果实际情况更复杂，那么您仍然可能想要实现Ebin的解决方案，以便将逻辑保留在逻辑所属的地方。但是，如果它像击键时模糊一样简单，然后再做另一件事，则可以在模板本身中使用引用。

Angular 2如何在按钮返回时模糊输入？

4 个答案: