模糊輸入而不調用 Blur() function

Question

我有 angular 自定義輸入元素。 現在我想做的是使用 javascript 以編程方式模糊這個輸入。 我的特殊情況是我不想觸摸輸入本身。 例如，當我單擊屏幕上的其他文檔元素時，輸入模糊，但是當我在此 dom 元素上調用 click() function 時，它不會。 那么如何在不觸摸輸入的情況下模糊它呢？

Answer 1

為了能夠在不觸摸輸入的情況下模糊輸入，您需要關注其他元素。

有人可能會認為只需在默認document.activeElement ( <body> ) 上調用focus()就可以了，但事實並非如此……瀏覽器對此各不相同，這是規范的一部分，我仍然很難做到把我的頭拿下來。

不過，所有瀏覽器都同意的是，具有tabindex .= -1 屬性的元素可以以編程方式聚焦，因此您始終可以在文檔正文上設置該屬性。 這不應該改變你的文檔的默認焦點行為。

 document.body.tabIndex = 0; document.querySelector( 'input' ).onfocus = (evt) => { console.log( 'will blur in 2s' ); setTimeout( () => { console.log( 'blurring' ); document.body.focus() }, 2000 ); };

 <input placeholder="click here to gain focus">

Answer 2

這個問題目前還不清楚。 您需要提供更多代碼。

也就是說，您可以使用 Angular 模板引用變量來模糊或聚焦輸入元素。 嘗試以下

模板

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

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

這里customInput是輸入元素的模板引用變量。

Controller

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

模糊輸入而不調用 Blur() function

問題描述

2 個解決方案

解決方案1
1 已采納 2020-05-26 11:55:38

解決方案2
0 2020-05-26 10:08:58

模糊輸入而不調用 Blur() function

問題描述

2 個解決方案

解決方案1 1 已采納 2020-05-26 11:55:38

解決方案2 0 2020-05-26 10:08:58

解決方案1
1 已采納 2020-05-26 11:55:38

解決方案2
0 2020-05-26 10:08:58