Form - If placeholder is set move Label (js)

Question

i need some help with my form.

I want the same form like this site :

https://secure.mypass.de/sso/web-fullpage/login?service=https%3A%2F%2Flo.la.welt.de%2Fuser%2Fredirect%3FredirectUrl%3Dhttps%253A%252F%252Fwww.welt.de%252F%253Fwtrid%253Dcrossdevice.n24.desktop.directhome&wt_eid=2148165323200346732&wt_t=1483902148371

They say, if a placeholder is set, the label should move. Can someone help me with this, i dont know how i can do it.

Here is my Demo: http://codepen.io/CRYP3/pen/WRvyxw

Answer 1

try this code, I didn't check it, so no idea if this will work:

$(function() {
    $("#username").focusin(function() {
        if($("#username").val().length < 1)
            $("#label").addClass("active");
    });
    $("#username").focusout(function() {
        if($("#username").val().length < 1)
            $("#label").removeClass("active");
    });
});

1st you need to set id for your label, then you need a class active , that will actually move the label.