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

thabet idris

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"})

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

thabet idris7y ago
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 !== ""); }); });
0
Piyush Pansuriya7y ago
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.
+1