jQuery Plugin For Image Placeholders In Text Fields - phImage

phImage is a tiny jQuery plugin to use custom images as placeholders in your text fields (inputs or textareas).

How to use it:

1. Load jQuery library and the jQuery phImage.js plugin in your Html page.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="js/ph-image.min.js"></script>

2. Add custom placeholder images into your text fields using data-ph-image attributes.

<input type="text" name="name" placeholder="Name" data-ph-image="1.png">
<input type="email" name="email" placeholder="Email" data-ph-image="2.png">
<input type="text" name="phone" placeholder="Phone" data-ph-image="3.png">
<textarea name="msg" placeholder="Message" data-ph-image="4.png"></textarea>

3. Call the function on the text fields.

$(document).ready(function() {

  $('input,textarea').phImage();
  
});

4. Default options.

$('input,textarea').phImage({

  // Whether to remove the placeholder text or not
  remove_current: true,

  // The padding applied to the element(s)
  padding: 'default',

  // The background position for the image.
  // "background-position" css property.
  background_position: null,

  // The background repeat setting for the image.
  background_repeat: 'no-repeat',
  
});

---

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