Smart Animated Placeholder Plugin with jQuery - Smart Fields

Smart Fields is a jQuery plugin used to create CSS3 animated, customizable placeholders for input and textarea elements. The goal is to slide the placeholders to the right as your start typing something into input and textarea elements

How to use it:

1. Place the jQuery smart fields plugin after jQuery JavaScript library.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="smartFields.js"></script>

2. Add your custom placeholders to existing input and textarea elements using placeholder or data-placeholderReplace attributes.

<input name="name" placeholder="First name">
<textarea name="name" 
          placeholder="Write a bit about yourself..." 
          data-placeholderReplace="Hi!"
></textarea>

3. Call the function to initialize the plugin with default options.

$("textarea, input").smartField();

4. The required CSS / CSS3 to style and animate the placeholders.

.smart-field {
  position: relative;
  width: 250px;
  min-height: 20px;
  padding: 10px 20px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
  -moz-transition: border 0.3s ease-in-out, margin-top 0.2s ease-in-out;
  -o-transition: border 0.3s ease-in-out, margin-top 0.2s ease-in-out;
  -webkit-transition: border 0.3s ease-in-out, margin-top 0.2s ease-in-out;
  transition: border 0.3s ease-in-out, margin-top 0.2s ease-in-out;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.smart-field input, .smart-field textarea {
  position: absolute;
  top: 10px;
  left: 20px;
  height: 20px;
  font-size: 15px;
  resize: none;
  color: #333;
  outline: none;
  border: none;
  opacity: 0;
  -moz-transition: opacity 0.2s ease-in-out;
  -o-transition: opacity 0.2s ease-in-out;
  -webkit-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
}

.smart-field .placeholder {
  color: #ccc;
  font-size: 15px;
  height: 20px;
  line-height: 20px;
  z-index: 2;
  position: absolute;
  left: 20px;
  top: 10px;
  -moz-transition: left 0.2s ease-in-out, top 0.2s ease-in-out, font-size 0.2s ease-in-out;
  -o-transition: left 0.2s ease-in-out, top 0.2s ease-in-out, font-size 0.2s ease-in-out;
  -webkit-transition: left 0.2s ease-in-out, top 0.2s ease-in-out, font-size 0.2s ease-in-out;
  transition: left 0.2s ease-in-out, top 0.2s ease-in-out, font-size 0.2s ease-in-out;
}

5. Available options.

$("textarea, input").smartField({

  //  css class for container
  className: 'smart-field',

  // placeholder attribute name
  placeholderAttrName: 'placeholder',

  // the max width (in percentage) the input can be before the placeholder is animated above the input. 
  threshold: 60,

  // for development
  showLogs: false,

  // executed when you focus an element
  focus: function() {},

  // executed when you blur an element
  blur: function() {},
  
});

---

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