我正在尝试实现输入框的具体化样式,即,在文本框上单击时,标签将向上移动并通过动画减小其字体大小。
我能够实现这一目标,但是发生的是,当我单击输入框时,标签在向上移动,同时出现了波动,例如表单元素在向上移动2px。
我该如何解决?这是我当前的代码:
$(document).ready(function(){
$("input").focus(function(){
$(this).parent().find("label").addClass('active_text_field');
});
$("input").focusout(function(){
if ($(this).val() == '') {
$(this).parent().find("label").removeClass('active_text_field');
};
});
})
.contact_form{
position: absolute;
display: block;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 50%;
height:500px;
}
.form-item label{
display: block;
font-size: 18px;
font-family: roboto;
position: relative;
top: 30px;
-moz-transition: all ease-in-out 200ms;
-webkit-transition: all ease-in-out 200ms;
transition: all ease-in-out 200ms;
}
.form-item input{
width:100%;
outline:none;
height:36px;
border:none;
border-bottom: solid black 1px;
}
.active_text_field{
transform: translateY(-30px);
-moz-transition: all ease-in-out 200ms;
-webkit-transition: all ease-in-out 200ms;
transition: all ease-in-out 200ms;
font-size: 16px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="contact_form">
<form>
<div class="form-item">
<label for="firstName">
First Name
</label>
<input type="text" name="firstName" class="text-field">
</div>
<div class="form-item">
<label for="lastName">
Last Name
</label>
<input type="text" name="lastName" class="text-field">
</div>
<div class="form-item">
<label for="email">
Email
</label>
<input type="text" name="email" class="text-field">
</div>
<div class="form-item">
<label for="confirmEmail">
Confirm Email
</label>
<input type="text" name="confirmEmail" class="text-field">
</div>
</form>
</div>
答案 0 :(得分:1)
通过将标签放置在相对于父容器绝对位置(相对于父容器相对)的位置,可以避免波动。您无需更改html / js,只需通过简单的CSS更新即可解决此问题。
为了更好的理解,我还创建了一个JsFiddle,链接:[https://jsfiddle.net/axesvL1q/1/][1]
.contact_form {
position: relative;
display: block;
margin: auto;
width: 50%;
height: 500px;
}
.form-item label {
display: block;
font-size: 18px;
font-family: roboto;
position: absolute;
left: 0;
top: 0;
-moz-transition: all ease-in-out 200ms;
-webkit-transition: all ease-in-out 200ms;
transition: all ease-in-out 200ms;
}
.form-item {
position: relative;
margin: 30px 0;
}
.form-item input {
width: 100%;
outline: none;
height: 36px;
border: none;
border-bottom: solid black 1px;
}
.active_text_field {
transform: translateY(-20px);
-moz-transition: all ease-in-out 200ms;
-webkit-transition: all ease-in-out 200ms;
transition: all ease-in-out 200ms;
font-size: 16px !important;
}
答案 1 :(得分:1)
只需使用正确的CSS即可制作position
。我认为您想使用代码来实现JSFiddle链接。
此外,当有人在输入框内的标签旁边单击时,请将label
display
属性用于inline-block
,以获得更好的浮动标签。
HTML代码-
<div class="contact_form">
<form>
<div class="form-item">
<label for="firstName">
First Name
</label>
<input type="text" name="firstName" class="text-field">
</div>
<div class="form-item">
<label for="lastName">
Last Name
</label>
<input type="text" name="lastName" class="text-field">
</div>
<div class="form-item">
<label for="email">
Email
</label>
<input type="text" name="email" class="text-field">
</div>
<div class="form-item">
<label for="confirmEmail">
Confirm Email
</label>
<input type="text" name="confirmEmail" class="text-field">
</div>
</form>
</div>
CSS代码-
.contact_form{
position: absolute;
display: block;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 50%;
height:500px;
}
.form-item {
margin-bottom: 20px;
position: relative;
}
.form-item label{
display: inline-block;
font-size: 18px;
font-family: roboto;
position: absolute;
top: 10px;
-moz-transition: all ease-in-out 200ms;
-webkit-transition: all ease-in-out 200ms;
transition: all ease-in-out 200ms;
}
.form-item input{
width:100%;
outline:none;
height:36px;
border:none;
border-bottom: solid black 1px;
}
.active_text_field{
transform: translateY(-30px);
-moz-transition: all ease-in-out 200ms;
-webkit-transition: all ease-in-out 200ms;
transition: all ease-in-out 200ms;
font-size: 16px !important;
}
JS代码-
$(document).ready(function(){
$("input").focus(function(){
$(this).parent().find("label").addClass('active_text_field');
});
$("input").focusout(function(){
if ($(this).val() == '') {
$(this).parent().find("label").removeClass('active_text_field');
};
});
});
答案 2 :(得分:0)
您可以使用简单的CSS解决问题,而无需使用Java脚本来浮动标签:
这是代码段:
.field-container {
position: relative;
width: 200px;
margin-top: 20px;
font-family: 'Roboto', sans-serif;
}
.field {
display: block;
width: 100%;
padding: 15px 10px 0;
border: none;
font-size: 14px;
}
.field:focus {
outline: 0;
}
.floating-label {
position: absolute;
pointer-events: none;
top: 5px;
left: 10px;
font-size: 10px;
opacity: 0;
background-color: white;
padding: 0 2px;
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
.field:valid+.floating-label {
opacity: 1;
top: -5px;
color: #9e9e9e;
}
.field:focus+.floating-label {
color: #03a9f4;
}
.field-underline {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: -5px;
border: 1px solid #9e9e9e;
z-index: -1;
padding: 10px 10px 0;
}
.field:focus+.floating-label+.field-underline {
border-color: #03a9f4;
}
<div class="field-container">
<input type="text" class="field" required placeholder="First name" />
<label class="floating-label">First name</label>
<div class="field-underline"></div>
</div>
<div class="field-container">
<input type="text" class="field" required placeholder="Last name" />
<label class="floating-label">Last name</label>
<div class="field-underline"></div>
</div>