我需要在聚焦输入时隐藏占位符，而是显示该输入的 label

Question

I have been looking for how to fix this, I have applied scss and css, also javascript. I need my input to show a placeholder when it opens normally and when you focus on it it will display its label and look small as in this photo I have.

https://i.stack.imgur.com/VxEqE.jpg

This is the input code and the label I'm handling serves me any code, ts, js, css, html.

<label> Contraseña </label>
<input placeholder='Ingrese su contraseña...'                           [class.isinvalid]="loginForm.controls.contrasena.invalid && (loginForm.controls.contrasena.dirty || loginForm.controls.contrasena.touched || isSubmited)">
<div *ngIf="loginForm.controls.contrasena.invalid && (loginForm.controls.contrasena.dirty || loginForm.controls.contrasena.touched || isSubmited)">
<small *ngIf="loginForm.controls.contrasena.hasError('required')">La contraseña es requerido</small>
</div>
</div>

Answer 1

You can find this in angular material library, if you are planning to use in your project with more options. https://material.angular.io/components/form-field/overview#form-field-overview

Else, you can build your custom input from this post.
Move placeholder above the input on focus

Answer 2

you don't have to hide the placeholder & you can't. you can do it easily --

1. transform the label a bit down to the exact location of placeholder.
2. increase the font-size of label.
3. set focus state of input set the transform of label to normal and decrease the font-size of the label.
4. to provide transition to this whole process use transition property in css.
5. to make everything work perfectly add a click handler to the label so that whenever it is clicked it focuses the input. document.getElementById("mytext").focus();