Make a title of the field goes over the field: asp MVC/Razor

Question

Hi,

I want when I enters information in the field, then the title of the field goes over the field.

Here is my code:

so in the field we have the text "FIRSTNAME", my purpose is when i enters information in this field, the text "FIRSTNAME" goes over the field.

And as long as the client has nothing to enter in a field, then the title remains in the field.

I search a lot if there is a trick to add in TextBoxFor to do that but i didn't find!

state initial :

state final:

Thanks a lot

@Html.TextBoxFor(model => model.FirstName, new { @placeholder = "FIRSTNAME", @class = "adresse-input"})

Piyush Pansuriya · Answer

For that, There is way like you can show/hide lable. If the textbox lenght > 0 then you can show the lable else hide the lable. May be it helps you.

thabet idris · Answer

Thanks a lot to Lesmian : You would need to use js for this. First wrap your textbox and corresponding label inside a div: FIRSTNAME @Html.TextBoxFor(model => model.FirstName, new { @placeholder = "FIRSTNAME", @class = "adresse-input"}) Then define a couple of CSS classes that will make label float: .wrapper { position:relative; margin:25px; } label { position:absolute; top:-13px; left:0; font-size:11px; transition: all 0.1s linear; opacity:0; } label.above { top:-20px; opacity:1; } And finally add JavaScript to apply classes dynamically when user fills in the field: $(function(){ $("input").on("keyup",function(){ $(this).prev("label").toggleClass("above", this.value !== ""); }); });