在Angular中，如何对点击或选项卡的输入进行不同的样式处理?

Question

出于设计原因，当用户在输入框中添加标签时，输入框的边框应该改变颜色。但是，如果用户点击进入输入字段，网站的其余部分也会显示为灰色。

我相信没有办法直接用html和css做到这一点。所以我正在寻找一种方法，用js做它。

目前我有它的设置调用点击和焦点从html。这对选项卡正确工作。然而，当用户点击进入时，点击和焦点都被调用。

输入的HTML:

<input
name="search"
type="search"
autocomplete="off"
placeholder="Search"
onfocus="this.placeholder = ''"
onblur="this.placeholder = 'Search'"
(click)="activateSearchBoxTakeover()"
(focus)="activateSearchBoxHighlight()"
[class.tm-homepage-search-header__search-input--click]="isSearchTakeover"
[class.tm-homepage-search-header__search-input--tab]="isSearchHighlight">

Component.ts

export class HomepageSearchHeaderComponent {
public isSearchTakeover: boolean;
public isSearchHighlight: boolean;
public activateSearchBoxTakeover (): void {
console.log('click');
this.isSearchTakeover = true;
this.isSearchHighlight = false;
}
public activateSearchBoxHighlight (): void {
console.log('not click');
this.isSearchTakeover = false;
this.isSearchHighlight = true;
}
}

Answer 1

我一直在使用默认的焦点样式来做我想要的选项卡。然后使用click函数添加覆盖默认样式的类。这样我也有最小的js。