npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

placekeeper

v1.0.7

Published

HTML5 placeholder attribute polyfill

Downloads

93

Readme

Placekeeper - HTML5 placeholder attribute polyfill

NPM version Build Status Sauce Test Status Coverage Status Code Climate

Sauce Test Status

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.