輸入框占位符/標簽動畫

Question

我有一個輸入框，其中寫有一些文本，如 label 或占位符，在鼠標上 hover 我想更改該文本，然后單擊要顯示不同的文本，就像占位符一樣。

我試過寫css但是沒能實現，難道他們需要寫JavaScript來實現這個animation。

Answer 1

而不是使用輸入字段使用 HTML 和 CSS，您可以輕松使用 PrimeNG Float Label，它更緊湊

鏈接： https://www.primefaces.org/primeng/floatlabel

Answer 2

在Angular？ 這簡單：

組件代碼隱藏

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  placeHolder="";

  onMouseOver() {
    this.placeHolder = "Ein Text"
  }

  onMouseLeave() {
    this.placeHolder = "";
  }
}

和 HTML 部分

<input type="text" (mouseover)="onMouseOver()" (mouseleave)="onMouseLeave()" [placeholder]="placeHolder">

如果鼠標進入輸入，占位符將可見。 讓它隱藏起來。