输入框占位符/标签动画

Question

I have a input box with some text written in it like label or placeholder and on mouse hover I want to change that text and on click want to display a different text which act like a placeholder.

I tried to write css but not able to achieve this,Is their need to write JavaScript to achieve this animation.

Answer 1

Instead Of Using input Field using HTML and CSS, You can easily use PrimeNG Float Label which is More Compactible

link: https://www.primefaces.org/primeng/floatlabel

Answer 2

In Angular? It's easy:

Component Code Behind

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 = "";
  }
}

And the HTML Part

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

If the mouse enter the input the placeholder will be visible. Leave it is hidden.