placekeeper

v1.0.7

Published

2 years ago

HTML5 placeholder attribute polyfill

Downloads

124

0High
0Medium
0Low

kristerkari

placeholder polyfill

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.

Placekeeper is built with testability, readability, modularity and clean code in mind. It borrows a lot of ideas, code and fixes from other polyfills, such as Placeholders.js and jquery-placeholder .

Installing

You can find Placekeeper and adapter versions from the dist folder. You can also install Placekeeper using npm:

npm install placekeeper

Usage

Include the Placekeeper's javascript on your page and it will be intialized automatically.

HTML

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

CSS

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:

input, textarea { color: #000; }
.placeholder { color: #aaa; }

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.

Options

You can change Placekeeper settings by using data- attributes on your <html> or <body> tags. If you don't set any data- attributes, Placekeeper will run with default settings.

Example:

<body data-placeholder-mode="input">

data-placeholder-mode

Default: focus

data-placeholder-mode="focus"

Hides placeholder when input field is focused.

data-placeholder-mode="input"

Does not hide placeholder on focus, but hides it after user types text to the input field.

data-placeholder-watch

Default: true

data-placeholder-watch="false"

Disables Placekeeper's feature that watches for placeholder attribute changes on input fields that are currently on the page.

Browser support

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.

http://dalelane.co.uk/blog/?p=2222

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 IE=edge.

Development

To start developing make sure that you have Node.js installed.

Install dependencies

Run npm install to install project dependencies.

Unit tests

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.

Tests are written using Jasmine and Karma is used as test runner.

Manual tests

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 test/manual.

Testing older Internet Explorer versions

You can run Placekeeper's unit tests in older Internet Explorer versions for example by using VirtualBox together with ievms.

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. http://10.0.1.2:9876).

Linting

Placekeeper uses a combination of ESLint and JSCS to validate both code syntax and code style. Make sure that you use npm run lint to check that your code passes the validation.

If you are using Sublime Text or Atom as your code editor, it is recommended to install SublimeLinter or Linter for Atom + plugins for ESLint, JSHint and JSCS to enable live linting.

Building

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.

Contributing

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 dist folder

License

The code is available under the MIT license.