I am working with angular and I have three requirements, There is input box first I have to show a placeholder on pageload like 'TEXT1' which will toggle on mousehover like 'TEXT2 and "TEXT1" and it will change again on mouse focus like 'TEXT3' I achieved it by property binding of placeholder but the problem is after focus hover effect is still on .

How to remove mouse over effect after clicking on input box.

https://stackblitz.com/edit/angular-ivy-hamsbp?file=src/app/app.component.ts,src/app/app.component.html

CodePudding user response：

  mousein:boolean=false
  focus:boolean=false
  focusText='Text3'
  mouseInText='Text2'
  defaultText = 'Text1';

<input
  type="text"
  [placeholder]="focus?focusText:mousein?mouseInText:defaultText"
  (mouseenter)="mousein=true"
  (mouseleave)="mousein=false"
  (focus)="focus=true"
  (blur)="focus=false"
/>

CodePudding user response：

You have here the change for text or color.

https://stackblitz.com/edit/angular-ivy-hep5pv?file=src/app/app.component.css,src/app/app.component.html&file=src/app/app.component.ts,src/app/app.component.html