javascript–当用户在那里输入内容时,输入字段事件的动画占位符

我见过像this.这样的演示

但它是关于创建一个新元素.

parent().append("" + $input.attr('placeholder') + "");


有没有办法让动态占位符在输入事件上消失而不添加新元素？

$("input[placeholder]").each(function () {

var $input = $(this);
// wrap the input with a label
$input.wrap("");
// append a span to the label
$input.parent().append("" + $input.attr('placeholder') + "");
// and finally remove the placeholder attribute
$input.attr('placeholder', '');

}).keyup(function () {

var $input = $(this);
// toogle hidden class on span, according to whether there is content or not
if ($input.val() === "") {
$input.next("span").removeClass("hidden");
} else {
$input.next("span").addClass("hidden");
}
});

label.placeholder {
position: relative;
}
label.placeholder span {
opacity: 1;
-webkit-transition: opacity 250ms;
-moz-transition: opacity 250ms;
-o-transition: opacity 250ms;
-ms-transition: opacity 250ms;
transition: opacity 250ms;
position: absolute;
left: 5px;
top: 2px;
font-size: 12px;
color: grey;
}
label.placeholder span.hidden {
opacity: 0;
}

解决方法:

Is there a way to animate placeholder’s disappear on input event without appending a new element?

由于默认的浏览器伪元素(即:: – webkit-input-placeholder / :: – moz-placeholder,： – ms-input-placeholder)很难跨浏览器设置样式,因此可以使用：before或：after伪元素代替附加的span元素.但是,由于无法将伪元素添加到输入元素,因此仍需要包装input元素.

Updated Example

伪元素绝对相对于父元素定位,以便它覆盖父元素.伪元素的内容值基于包装元素的自定义data- *属性data-placeholder,这是使用内容值attr(data-placeholder)实现的.

我还简化了你的jQuery：

$('input[placeholder]').each(function () {
$(this).wrap('').attr('placeholder', '');
}).on('keyup', function () {
$(this).parent().toggleClass('hidden', this.value !== '');
});

label.placeholder {
position: relative;
}
label.placeholder:after {
content: attr(data-placeholder);
position: absolute;
top:0; right: 0;
bottom: 0; left: 0;
padding: 2px;
font-size: 12px;
color: grey;
cursor: text;
transition: opacity 250ms;
}
label.hidden.placeholder:after {
opacity: 0;
}

如果是长占位符值,您还可以添加以下内容：

Updated Example

label.placeholder:after {
/* .. */
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}