Размытие ввода без вызова функции Blur () - PullRequest
Новая
       1

Размытие ввода без вызова функции Blur ()

0 голосов
/ 26 мая 2020

У меня есть angular пользовательский элемент ввода. Теперь я хочу программно размыть этот ввод, используя javascript. Мой частный случай - я не хочу касаться самого ввода. Например, когда я щелкаю какой-либо другой элемент документа на экране, ввод размывается, но когда я вызываю функцию click () для этого элемента dom, этого не происходит. Так как же его размыть, не касаясь ввода?

Ответы [ 2 ]

1 голос
/ 26 мая 2020

Чтобы иметь возможность размыть ввод, не касаясь его, вам нужно сфокусировать другой элемент.

Можно было бы подумать, что простой вызов focus() по умолчанию document.activeElement (<body>) подойдет, но это не так ... Браузеры все различаются в этом, и это одна часть спецификаций Я все еще изо всех сил пытаюсь оторвать голову.

Однако все браузеры согласны с тем, что элемент с атрибутом tabindex! = -1 может быть сфокусирован программно. Таким образом, вы всегда можете установить этот атрибут в теле документа, который не должен изменять поведение фокуса по умолчанию вашего do c. 

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">
0 голосов
/ 26 мая 2020

Вопрос пока неясен. Вам нужно предоставить больше кода.

Тем не менее, вы можете использовать Angular ссылочную переменную шаблона , чтобы размыть или сфокусировать элемент ввода. Попробуйте следующий

Шаблон 

<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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...