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

【问题标题】：Angular 2 How to blur input on button return?Angular 2 如何在按钮返回时模糊输入？
【发布时间】：2018-11-28 11:43:14
【问题描述】：

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

例如：

<input type="text" #search>

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

【问题讨论】：

预期的输出会更清晰……这意味着你想要什么！

标签： javascript angular typescript

【解决方案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

【讨论】：

如何在浏览器而不是手机中进行测试？
您可以通过手机访问该网站，我测试它可以工作
我现在正在使用这个方法，但它实际上只有在我下一次调用它时才有效。 setTimeout(() => this.btcField.nativeElement.blur(), 0); 我相信在同一个刻度上执行此操作一定是更好的方法。例如在冒泡事件结束时。任何想法如何做到这一点？我对 angular 2 还不够熟悉。我在点击事件中模糊输入。有一个扫描二维码的小按钮，当用户点击它时，我想隐藏手机上的键盘。

【解决方案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
}

这是一个有效的堆栈闪电战，再次基于 Ebin 的回答：stackblitz

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

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

【讨论】：

【解决方案3】：

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

例子

HTML

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

.ts

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

【讨论】：

我的问题是如何模糊 - this.search.blur() 不会模糊输入。
已编辑答案。 @Angulandy2
什么是之前的焦点相等？
它将是 0 @Angulandy2

【解决方案4】：

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


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

【讨论】：