输入框占位符/标签动画

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">

如果鼠标进入输入，占位符将可见。 让它隐藏起来。