Question

我见过像this.

这样的演示

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

parent().append("<span>" + $input.attr('placeholder') + "</span>");

有没有办法让占位符在input event上消失而不添加新元素？

$("input[placeholder]").each(function () {
    
    var $input = $(this);
    // wrap the input with a label
    $input.wrap("<label class='placeholder'>");
    // append a span to the label
    $input.parent().append("<span>" + $input.attr('placeholder') + "</span>");
    // 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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="the placeholder">

Answer 1

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

由于默认浏览器伪元素（即::-webkit-input-placeholder / ::-moz-placeholder，:-ms-input-placeholder）很难在浏览器中设置样式，因此您可以使用:before或{{1伪元素代替附加的:after元素。但是，由于无法将伪元素添加到span元素，因此您仍需要包装input元素。

Updated Example

伪元素绝对相对定位到父元素，以便它覆盖父元素。伪元素的input值基于包装元素的自定义content属性data-*，这是使用data-placeholder值content实现的。

我还简化了你的jQuery：

attr(data-placeholder)

$('input[placeholder]').each(function () {
    $(this).wrap('<label class="placeholder" data-placeholder="' + this.placeholder + '">').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;
}

如果值<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" placeholder="the placeholder"/>很长，您还可以添加以下内容：

Updated Example

placeholder

当用户在那里输入内容时，为输入字段事件设置动画占位符

1 个答案: