Skip to content

Placeholder Enhanced enhance the use of HTML5 placeholder attribute providing cross-browser support & styling

License

Notifications You must be signed in to change notification settings

dciccale/placeholder-enhanced

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Placeholder Enhanced 1.6.9

This jQuery Placeholder plugin is an enhanced polyfill for the HTML5 placeholder attribute.

Features

  • Cross-browser & Cross-styling
  • Support for all input types, password, textarea, text, email, search, url, etc...
  • Robust: it heavely behave as the HTML5 placeholder defined in the specs
  • Normalize placeholder behaviour in modern browsers (optional). This means the placeholder will hide on input focus.
  • Fix jQuery.val() function to work as expected to set/get the value of inputs with placeholder
  • Lightweight: 970 bytes minified & gzipped

Requires jQuery 1.4.4 or higher

Installation

bower install placeholder-enhanced

or download this repo

Usage

Just include the js file after jQuery on your HTML page and the plugin will be automatically initialized

<script src="jquery.js"></script>
<script src="jquery.placeholder-enhanced.js"></script>

If you want to initialize the plugin yourself after the first auto-initialize (for example after ajax content being loaded), just call the plugin like this:

$('input[placeholder], textarea[placeholder]').placeholderEnhanced();

Example:

Initialize the plugin after loading an HTML page via AJAX, call the plugin after the content is loaded.

$(function () {
  $.get('file.html', function (html) {
    $('#container')
      // append the html
      .append(html)
      // find any inputs or textareas with placeholder and initialize the plugin
      .find('input[placeholder], textarea[placeholder]').placeholderEnhanced();
  });
})

Destroy

If you want to destroy the plugin call:

$('input[placeholder], textarea[placeholder]').placeholderEnhanced('destroy');

It will automatically clean all what the plugin first created as if it was never initialized, only for the selected elements.

CSS

Customize the style of the placeholder with CSS in a cross-browser manner:

See placeholder-enhanced.css

Demo

For a demo see demo.html online

Build

If you want to work on the plugin there is a Makefile with two targets:

To lint with jshint

$ make lint

Minify the js file

$ make build

TODO

These are not major tasks, but nice to have:

  • Create a kimbo.js plugin version.
  • Create a plain JavaScript version?
  • Create two separate versions.
    • Version 1.x to give full cross-browser support and normalization. (current version)
    • Version 2.x only to normalize modern browsers placeholder behaviour.

License

See LICENSE.txt

About

Placeholder Enhanced enhance the use of HTML5 placeholder attribute providing cross-browser support & styling

Resources

License

Stars

Watchers

Forks

Packages

No packages published