停止浮动标签重置回原始位置 [英] Stop floating labels from resetting back to original position
问题描述
背景
我正在建立一个具有充当占位符标签的登录表单。你为什么要问？因为他们必须翻译，JS不能定位占位符，或者我们的开发人员不知道如何。因此，当输入域获得焦点时，标签向上移动。我有这么多工作。我的问题是，在我在输入字段中写一些东西，然后转到下一个，输入字段失去焦点，标签返回到他们是当他们是占位符wannabes时。
I'm building a login form that has labels acting as placeholders. Why do you ask? Because they have to be translated and the JS can't target the placeholder or our developers don't know how. So, the labels move up when the input field takes focus. I have that much working. My problem is, after I write something in the input field, and go to the next, the input field loses focus and the labels go back to where they were when they were placeholder wannabes.
所以，我的问题是：
有一个Javascript（jQuery是好的），将检测输入字段中的内容，根据这些信息，将标签保留在刚才移动到的顶部？
Is there a Javascript (jQuery is fine) that will detect content in the input field and based on that information, leave the labels in the top where they just moved to?
请记住，它应该由输入内容驱动，因为如果用户点击输入类型的东西，但删除它，或只是通过它的标签，我想标签回到一个占位符。这部分在登录表单中可能没有什么意义，因为这两个字段显然都是必需的，但如果这项工作正常，我想在网站上使用它。这是一个好的用户体验概念。
Keep in mind, it should be driven by content inside the input, because if the user click in the input types something but deletes it, or simply tabs through it, I do want the label to go back to be a place holder. This part may not make much sense in a login form because both fields are obviously required, but if this works correctly, I want to use it accross the site. It is a good UX concept.
这是我有的。
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;
}
和一个方便的dandy codepen
And a handy dandy codepen
推荐答案
可能的重复检测输入中是否有文本使用CSS
Possible duplicate of Detect if an input has text in it using CSS?.
这里是你的笔中的解决方案，因为你想使用这个无效的黑客：）
Here is the solution in your pen, given you want to use this "invalid hack" :)
<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 。
这篇关于停止浮动标签重置回原始位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
