angular-shims-placeholder

Angular directive to emulate attribute placeholder in input fields of type text and of type password for all browsers, including IE8 and lower. Also works on textareas and html5 input types.

This directive works in both directions, which means that changing the value from inside the model is honoured in the form.

In comparison to https://github.com/urish/angular-placeholder-shim, this Angular directive is implementend purely on the AngularJS API and does not depend on other libraries, such as jQuery and jquery-html5-placeholder-shim.

Build status

Usage

Include

<script src="angular-shims-placeholder.min.js"></script>

into your application.

Add the module as a dependency to your application module:

angular.module('MyAwesomeApp', [/* other dependencies */, 'ng.shims.placeholder']);

That's it. Now, text fields having an attribute placeholder behave almost as native placeholder fields, even on IE8 and below.

Example:

<input type="text" name="email" placeholder="Enter your email" />

Note

Remember to adapt your styles for forms using this placeholder directive. To an empty input field, the class empty is added. So, when defining your styles, use a light grey, or similar, as text-color, to distinguish optically between labels and real input.

License

Released under the terms of MIT License.

Copyright (C) 2013, Jacob Rief [email protected]