Angular 2如何模糊按钮返回上的输入

Question

如何在手机上按本机键盘返回button来模糊input？

例如：

<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()
}

工作堆叠式

Answer 2

根据我对问题的理解，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，再次建立在Ebin的答案之上：stackblitz

在这个例子中，元素引用仍然被使用，只是模板端。或者，也可以在此处指定对buttonClicked((的方法调用，而不是调用clickButton.click((，尽管这可能取决于预期的行为。

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

Answer 3

您可以使用keyup.<key>事件来执行此操作。要设置模糊，可以使用tabindex属性，有关更多信息，请参阅此链接

示例

HTML

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

.ts

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

Answer 4

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

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