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

Question

背景

我正在构建一个登录表单，其中包含充当占位符的标签。你为什么要问？因为它们必须被翻译并且 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;
}

还有一个得心应手的花花公子codepen

Answer 1

Detect if an input has text in it using CSS -- on a page I am visiting and do not control? 可能重复。

这是你笔中的解决方案，因为你想使用这个“无效的黑客”:)

 <input type="text" class="form-control input-lg" required>

结合：

.float-labels input:focus + label, .float-labels input:valid + label{'styling'}

和 http://codepen.io/anon/pen/QygwLR?editors=110.