如何在使用 Angular 中單擊或標記的輸入具有不同的樣式

Question

出於設計原因，當用戶進入輸入字段時，輸入的邊框應該改變顏色。 但是，如果用戶點擊輸入字段，該站點的 rest 也顯示為灰色。

我相信沒有辦法直接使用 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;
  }
}

Answer 1

我使用的“修復”是讓 default:foucs 樣式做我想要的選項卡。 然后使用單擊 function 添加覆蓋默認樣式的 class。 這樣我也有最小的js。