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

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

1 个答案: