angular-shims-placeholder

Angular directive to emulate the placeholder attribute on text and password input fields for old browsers, such as IE9, IE8, and below. 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.

Demo

View Demo

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.

Compatibility

This directive is compatible with ngModel, ngDisabled, ngReadonly, ngRequired, ngShow, and ngHide.

If you modify a shimmed input from outside of Angular, use the 'change' event to update the placeholder display. e.g. elem.triggerHandler('change')

If you modify the placeholder attribute outside of angular, use the 'placeholder-change' event to update the placeholder text itself. sytax as follows elem.triggerHandler('placeholder-change', $('#myInput').attr('placeholder'))

Known Issues

• Ignores text input from drag and drop
• Does not support modern-style placeholders that persist until text is entered
• IE8/9: Disabled textareas show the text insertion cursor on hover. This is due to an IE bug.
• IE8/9: Clearing a filled input while its text is selected can cause the resulting placeholder text to appear selected
• No way for an individual input to opt out
• Not tested with ngAnimate
• Not tested with ngSubmit
• Not tested with ngClass
• Not tested with dynamic placeholders e.g. placeholder="{{val}}"

Authors

Original author: Jacob Rief
Maintained by: Chad von Nau

License

Released under the terms of MIT License.