我正在尝试为我的页面上的窗体实现浮动标签。浮动占位符
我引用了几个来源,并在codepen和Fiddle中遇到了这个链接。
我可以实现这一点,但这些方法需要重新做所有的形式,我需要换行输入字段在一个div或者一个字段,并添加标签。有没有办法做到这一点,使用jQuery和直接定位占位符?
我明白问题是非常高的水平。我很抱歉。
我正在尝试为我的页面上的窗体实现浮动标签。浮动占位符
我引用了几个来源,并在codepen和Fiddle中遇到了这个链接。
我可以实现这一点,但这些方法需要重新做所有的形式,我需要换行输入字段在一个div或者一个字段,并添加标签。有没有办法做到这一点,使用jQuery和直接定位占位符?
我明白问题是非常高的水平。我很抱歉。
我在这里有一个jQuery为你解决 - 所有它需要的是你添加一个“占位符=‘placeHolderTextGoesHere’”属性,每个表单元素。
$("input").each(function(e){
$(this).wrap('<fieldset></fieldset>');
var tag = $(this).attr("placeholder");
$(this).attr("placeholder","");
$(this).after('<label for="name">'+tag+'</label>');
});
我们正在做的是找到所有的投入 - 在一个字段包装它们,然后添加一个标签后 - 我们使用占位符标记为回退的没有,JS的游客,并将其设置为“”如果JS在获得其价值后被允许。
$("input").each(function(e) {
$(this).wrap('<fieldset></fieldset>');
var tag = $(this).attr("placeholder");
//var tag= $(this).data("tag");
$(this).attr("placeholder", "");
$(this).after('<label for="name">' + tag + '</label>');
});
$('input').on('blur', function() {
if (!$(this).val() == "") {
$(this).next().addClass('stay');
} else {
$(this).next().removeClass('stay');
}
});
* {
box-sizing: border-box;
}
body {
background: #eee;
}
form {
background: #fff;
padding: 2em;
width: 30em;
margin: 5em auto;
border-radius: 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
fieldset {
border: none;
position: relative;
font-family: arial, sans-serif;
}
input {
width: 20em;
padding: 1em 1em .8em 1em;
width: 100%;
font-size: 1.2em;
border: 1px solid #aaa;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .15);
border-radius: 2px;
}
input:focus {
outline: none;
background: #fbfbe9;
}
input + label {
display: block;
cursor: text;
color: #777;
transition: .15s ease-out all;
position: absolute;
top: 1.8em;
left: 2.3em;
}
input:focus + label,
label.stay {
top: 1em;
left: 3em;
font-size: .7em;
font-weight: bold;
color: #139dd7;
transition: .15s ease-out all;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<input type="text" placeholder="name" name="" id="name" />
<input type="text" placeholder="email" name="" id="email" />
</form>
感谢是很接近我想要以最小的变化exisitng代码(CSS的字段集类)。谢谢。 – user3861559 2015-02-23 20:36:37
http://codepen.io/iamjordanlittle/pen/AHdfn – user3861559 2015-02-23 19:47:11