imclab/politespace

Politely add spaces to numeric form values to increase readability (credit card numbers, phone numbers, etc).

Politespace

Using Politespace

Add data-politespace to your form’s input[type=text] (et al) or textarea and we’ll add spaces to the value when the user blurs off of it. We’ll also remove those spaces on focus.

To customize the number of spaces, use the data-grouplength attribute (it defaults to 3). It can be:

• single number (to uniformly repeat, like a credit card)
• a comma delimited list (for non-uniform strings, like "2,4" for MM YYYY). This also works with open ended commas, like "2," for MM YYYY or "3,3," for a US phone number.

Use pattern="[0-9]*" for numeric keyboards on iOS.

This script does not work reliably cross-browser with <input type="number">: independent of politespace, WebKit removes the value on blur when a script attempts to add a non-numeric character in the field, for example: myElement.value = "1,000".

Make sure your maxlength value is large enough to allow for the addition of the whitespace.

Demo

Download politespace.js

or use Bower: bower install politespace

Tests

Beware input masks.

This plugin was created as a less intrusive alternative to the common input mask, which have serious accessibility implications:

A quick screen/audio recording of tabbing around a form using JS input masks with VoiceOver enabled.

—@scottjehl

Just a friendly monthly reminder that input mask plugins make your forms sound like a jackhammer to people who use a screen reader. Cheers!

—@scottjehl

Using the repo

Run these commands:

• npm install
• bower install
• grunt as normal

Configuring Grunt

Rather than one giant Gruntfile.js, this project is using a modular Grunt setup. Each individual grunt configuration option key has its own file located in grunt/config-lib/ (readonly upstream configs, do not modify these directly) or grunt/config/ (project specific configs). You may use the same key in both directories, the objects are smartly combined using Lo-Dash merge.

For concatenation in the previous Gruntfile setup, you’d add another key to the giant object passed into grunt.initConfig like this: grunt.initConfig({ concat: { /* YOUR CONFIG */ } });. In the new configuration, you’ll create a grunt/config/concat.js with module.exports = { /* YOUR CONFIG */ };.

License

MIT License