表单 - 如果设置了占位符，则移动标签（js）答案

【问题标题】：Form - If placeholder is set move Label (js)表单 - 如果设置了占位符，则移动标签（js）
【发布时间】：2017-05-23 01:18:17
【问题描述】：

我的表单需要一些帮助。

我想要和这个网站一样的表格：

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

【问题讨论】：

这不是占位符，他们在输入上使用label。您可以在焦点上移动标签
但是如果设置了占位符，标签仍然在同一个位置。
只要签入onfocus，如果输入有值，则移动，否则什么都不做
您知道如果设置了值，我如何移动标签吗？有添加类吗？

标签： javascript forms label placeholder translate

【解决方案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，它实际上会移动标签。

【讨论】：