javascript - 如何对使用 Angular 进行单击或标签化的输入具有不同的样式

Question

出于设计原因，当用户进入输入字段时，输入的边框应该改变颜色。但是，如果用户单击输入字段，则站点的其余部分也将显示为灰色。

我相信没有办法用直接的html和css来做到这一点。所以我正在寻找一种使用js的方法。该应用程序使用 Angular。

目前，我已将其设置为从 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">

组件.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;
  }
}

标签： javascriptcssangular

Answer 1

我使用的“修复”是让默认的 :foucs 样式做我想要的标签。然后使用 click 函数添加一个覆盖默认样式的类。这样我也有最小的js。