Have you ever come across interactive demos like this one?
I've noticed that most examples involve creating a new element.
parent().append("<span>" + $input.attr('placeholder') + "</span>");
Is there a way to make the placeholder text disappear with an animation when the user interacts with the input field, without having to add a new element dynamically?
$("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);
// toggle hidden class on span, depending on 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">