Форма - если заполнитель установлен, переместите ярлык (js)

Question

Мне нужна помощь с моей формой.

Я хочу такой же вид, как этот сайт:

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

Они говорят, если заполнитель установлен, метка должна двигаться. Может кто-нибудь помочь мне в этом, я не знаю, как я могу это сделать.

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

Answer 1

попробовать этот код, я не проверял, поэтому не знаю, если это не будет работать:

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

первый вам нужно установить id для этикетки, то вам нужен класс active, который фактически переместит ярлык.