User-friendly Floating Placeholder With jQuery - Placeholder Pop

A smart, user-friendly placeholder which uses JavaScript and CSS to place the placeholder text in the upper-right corner of the input field when the user starts typing.

How to use it:

1. Wrap the placeholder into an inline element like so:

<div class="withplaceholder">
  <span class="placeholder">Username</span>
  <input name="1" type="text" placeholder="Username">
</div>

2. The primary CSS styles for the placeholder.

.withplaceholder {
  display: inline-block;
  position: relative;
}

.withplaceholder input { position: relative; }

.placeholder {
  display: block;
  font-size: 11px;
  color: #999;
  position: absolute;
  top: 13px;
  right: 15px;
  transition: all .3s ease-in-out;
  text-align: right;
  z-index: 5;
  opacity: 0;
}

.placeholder.on {
  transition: all .3s ease-in-out;
  float: right;
}

3. Load the latest version of jQuery JavaScript library at the end of the document.

<script src="//code.jquery.com/jquery.js"></script>

4. The core jQuery script to active the floating placeholder by toggling corresponding CSS classes.

$(".withplaceholder input").bind("change paste keyup", function() {
  if($(this).val() == ''){
     $(this).prev().removeClass("on");
     $(this).prev().animate({opacity:'0'}, 0);
  } else {
     $(this).prev().addClass("on");
     $(this).prev().animate({opacity:'1'}, 0);
  }
});

---

This awesome jQuery plugin is developed by stevenoone. For more Advanced Usages, please check the demo page or visit the official website.