Input box placeholder/label animations-CodePudding

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.

CodePudding user response：

In Angular? It's easy:

Component Code Behind

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

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

  placeHolder="";

  onm ouseOver() {
    this.placeHolder = "Ein Text"
  }

  onm ouseLeave() {
    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.

CodePudding user response：

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