停止浮动标签重置回原始位置

背景

我正在构建一个具有充当占位符的标签的登录表单。你为什么问？因为它们必须被翻译，JS不能针对占位符，或者我们的开发人员不知道如何翻译。因此，当输入字段聚焦时，标签会向上移动。我有那么多工作要做。我的问题是，当我在输入字段中写了一些东西并转到下一个字段后，输入字段失去了焦点，标签又回到了它们想要占位符时的位置。

所以，我的问题是：

是否有一个Javascript（jQuery很好）可以检测输入字段中的内容，并根据这些信息将标签留在它们刚刚移动到的顶部？

请记住，它应该由输入中的内容驱动，因为如果用户点击输入中的某个内容，但删除了它，或者只是在其中进行制表，我确实希望标签回到占位符。这一部分在登录表单中可能没有多大意义，因为这两个字段显然都是必需的，但如果这一点正确，我想在整个网站上使用它。这是一个很好的用户体验概念。

这就是我所拥有的。

HTML

<div class="container">
    <div class="col-xs-4 col-xs-push-4 martop50">
        <div class="login-content">
            <h4 class="text-center m-t-0 m-b-20">Great to have you back!</h4>
            <form action="home.html" method="POST" name="login_form" class="form-input-flat">
                <div class="form-group">
                    <div class="float-labels">
                        <div class="input-group">
                            <span class="input-group-addon left"><i class="fa fa-fw fa-lg fa-user"></i></span>
                            <input type="text" class="form-control input-lg">
                            <label for="user">Username</label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="float-labels">
                        <div class="input-group">
                            <span class="input-group-addon left"><i class="fa fa-fw fa-lg fa-lock"></i></span>
                            <input type="password" class="form-control input-lg">
                            <label for="user">Password</label>
                        </div>
                    </div>
                </div>
                <div class="row m-b-20">
                    <div class="col-md-12">
                        <button type="submit" class="btn btn-default btn-lg btn-block">Sign in to your account</button>
                    </div>
                </div>
                <div class="text-center">
                    <small>Problems loging in? </small><a href="register.html" class="text-muted">Contact Support</a>
                </div>
            </form>
        </div>
    </div>
</div>

CSS

.martop50 {
    margin-top: 50px;
}
.login-content, .login .login-content {
    padding: 25px 30px;
    -webkit-border-radius: 0 0 8px 8px;
    -moz-border-radius: 0 0 8px 8px;
    -ms-border-radius: 0 0 8px 8px;
    border-radius: 0 0 8px 8px;
    background: #101113;
    box-shadow: 0 2px 0 #000;
}
h4{
    color: rgba(248,151,29,0.77);
}
.form-input-flat .input-group-addon.left {
    background: #30373e;
    border: 2px solid #8f8f8f;
    color: #bbb;
    border-right: none;
    -webkit-border-radius: 50% 0 0 50%;
    -moz-border-radius: 50% 0 0 50%;
    -ms-border-radius: 50% 0 0 50%;
    border-radius: 50% 0 0 50%;
    padding: 8px 10px 5px 13px;
}
.form-input-flat .input-group-addon {
    background: #30373e;
    border: 2px solid #8f8f8f;
    color: #bbb;
    border-left: none;
    -webkit-border-radius: 0 50% 50% 0;
    -moz-border-radius: 0 50% 50% 0;
    -ms-border-radius: 0 50% 50% 0;
    border-radius: 0 50% 50% 0;
    padding: 0 13px 0 10px;
}
.input-group .form-control:not(:first-child):not(:last-child), .input-group-addon:not(:first-child):not(:last-child), .input-group-btn:not(:first-child):not(:last-child) {
    border-radius: 0 34px 34px 0;
}
.form-control {
    border-width: 2px;
    border-color: #8f8f8f;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #bbb;
    -webkit-border-radius: 34px;
    -moz-border-radius: 34px;
    -ms-border-radius: 34px;
    border-radius: 34px;
    background: #211E1E;
}
.float-labels label {
    font-size: 15px;
    line-height: 18px;
    font-weight: 500;
    position: absolute;
    z-index: 2;
    left: 65px;
    top: 35px;
    padding: 0 2px;
    pointer-events: none;
    background: transparent;
    -webkit-transition: -webkit-transform 100ms ease;
    -moz-transition: -moz-transform 100ms ease;
    -o-transition: -o-transform 100ms ease;
    -ms-transition: -ms-transform 100ms ease;
    transition: transform 100ms ease;
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -o-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
}
label {
    color: #bbb;
}
.float-labels input:focus {
  border-color: #ccc;
  box-shadow: none;
}
.float-labels input:focus + label, 
.float-labels input:invalid + label  {
  color: rgba(248, 151, 29, 0.77);
  -webkit-transform: translateY(-20px);
  -moz-transform: translateY(-20px);
  -o-transform: translateY(-20px);
  -ms-transform: translateY(-20px);
  transform: translateY(-20px);
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
  top: 14px;
  background: #211E1E;
}

还有一个方便的代码笔