模糊输入而不调用Blur（）函数

Question

我有角度自定义输入元素。现在，我要做的是使用javascript以编程方式模糊此输入。我的特殊情况是我不想触摸输入本身。例如，当我单击屏幕上的其他文档元素时，输入会模糊，但是当我在此dom元素上调用click（）函数时，它不会。那么如何在不触摸输入的情况下使其模糊？

Answer 1

此问题目前尚不清楚。您需要提供更多代码。

也就是说，您可以使用Angular template reference variable来模糊或聚焦输入元素。尝试以下操作

模板

<input #customInput type=text placeholder="Enter your name"/>

<button (mouseup)="blurInput(customInput)">Blur input</button>
<button (mouseup)="focusInput(customInput)">Focus input</button>

这里customInput是输入元素的模板参考变量。

控制器

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  blurInput(input) {
    input.blur();
  }

  focusInput(input) {
    input.focus();
  }
}

工作示例：Stackblitz