Placekeeper - HTML5 placeholder attribute polyfill
Placekeeper is a HTML5 placeholder attribute polyfill for old browsers that lack support for it. It detects if browser supports HTML5 placeholder attribute and is only active when there is no browser support. The polyfill works standalone and can be used without a library like jQuery.
You can find Placekeeper and adapter versions from the
dist folder. You can also install Placekeeper using npm:
npm install placekeeper
The plugin automatically adds
class="placeholder" to the elements who are currently showing their placeholder text. You can use this to style placeholder text differently:
I’d suggest sticking to the
#aaa color for placeholder text, as it’s the default in most browsers that support
@placeholder. If you really want to, though, you can style the placeholder text in some of the browsers that natively support it.
You can change Placekeeper settings by using
data- attributes on your
<body> tags. If you don't set any
data- attributes, Placekeeper will run with default settings.
Hides placeholder when input field is focused.
Does not hide placeholder on focus, but hides it after user types text to the input field.
Disables Placekeeper's feature that watches for placeholder attribute changes on input fields that are currently on the page.
All browsers from the last ~3-4 years support HTML5 placeholder attribute, so use this polyfill only if you want to support older browsers (e.g. Internet Explorer < 10 and older iOS/Android versions).
Placekeeper is heavily tested with unit tests and manual testing using several browsers that do not support the HTML5 placeholder attribute. If you notice that Placekeeper is not working with a browser, please open a new Github issue about it.
Browser support for HTML5 placeholder attribute
- IE ✘ 5.5+ ✔ 10+
- Firefox ✘ 2+ ✔ 4+
- Chrome ✔
- Safari ◒ 3.1+ ✔ 5+
- Opera ✘ 9+ ◒ 11+ ✔ 11.5+
- iOS Safari ✔
- Opera Mini ✘
- Android Browser ✔ 2.1+ ◒ 4+ ✔ 4.2-4.3+
- Blackberry Browser ✔
- Opera Mobile ✘ 10+ ✔ 11+
- Chrome for Android ✔
- Firefox for Android ✔
- IE Mobile ✔
- UC Browser for Android ✔
ⓘ Partial support in older Safari and Opera versions refers to lacking placeholder support on textarea elements.
Avoiding Internet Explorer compatibility mode with older IE versions
Internet Explorer has “Compatibility View”. Compatibility View makes IE behave like the older versions of Internet Explorer, the ones before Microsoft started paying more attention to web standards.
It makes sense – there are a lot of websites out there that were written to render well on old versions of Internet Explorer, and Microsoft needed to make the move to standards compliance in a way that doesn’t break all of them.
The problem is, Compatibility View can be a little… insistent.
Unfortunately compatibility mode can cause weird bugs to show up and break functionality. Sometimes compatibility mode is enabled by the user, sometimes by the browser.
Best way of stopping your page from going to compatibility mode and telling Internet Explorer to render in latest engine is to send a header from server side with the name
X-UA-Compatible and value
To start developing make sure that you have Node.js installed.
npm install to install project dependencies.
Unit tests are located in
test/unit folder. Run tests with
npm test. If you want to run unit tests using a watcher (TDD mode), use
npm run tdd.
You can start a development server by running
npm start. Then open
http://localhost:8080 in your browser to see different plugin modes listed. Test files are located in
Testing older Internet Explorer versions
After installing IE VMs, use
npm run tdd to start Karma, start any of the VMs and open Internet Explorer with your local ip address and port 9876 (e.g.
You can build source files to
dist folder by using
npm run build. If you are making a contribution/pull request, make sure that you don't commit any files from
dist folder together with your changes.
Before you open a pull request with changes, make sure that:
- Your code has a unit test and the unit test passes on older browsers (e.g. IE7-10).
- All the existing tests are passing
- Your code passes linting:
npm run lint
- You haven't committed any changes to Git for the files in
The code is available under the MIT license.