filamentgroup / politespace

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

⚠️ This project is archived and the repository is no longer maintained.

Politespace

Demo

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.

data-politespace-grouplength

To customize the number of spaces, use the data-politespace-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 now works reliably cross-browser with <input type="number">. It should be noted that independent of politespace, WebKit removes the value on blur when a user types or a script adds a non-numeric character in the field, for example: myElement.value = "1,000". We’re now creating a proxy element on top of the form element to workaround this issue and display the formatted value.

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

data-politespace-delimiter

The default delimiter is a space, but you can add data-politespace-delimiter to customize to a different character.

data-politespace-reverse

When delimiting money, for example, you want the grouplengths to be calculated from the lowest digit to the greatest (from right to left). Use data-politespace-reverse to opt into this behavior. A USD Price example: data-politespace-grouplength="3" data-politespace-delimiter="," data-politespace-reverse

data-politespace-decimal-mark

When delimiting money as a floating point, you’ll want to exclude the fractional portion of the number when inserting delimiters. For example, $4,000.34 will need data-politespace-delimiter="," data-politespace-decimal-mark="." (or for proper internationalization, $4 000,34 will need data-politespace-delimiter=" " data-politespace-decimal-mark=",").

data-politespace-strip

Specify a regular expression of characters to remove before formatting the field. To strip out all non-numeric characters (for example, for a telephone number), use data-politespace-strip="[^\d]*". This is an alternative to the numeric-input plugin of formcore.

data-politespace-creditcard

When using politespace with credit card fields, the formatting logic changes based on the first digit. For example, American Express (AMEX) card formats are 4,6,5 (15 characters total, the first digit is a 3) and Visa/Mastercard/Discover are 4,4,4,4 (16 characters). If you use the data-politespace-creditcard attribute (in lieu of a data-politespace-grouplength) politespace will automatically adjust the politespace group length for you. If you add the data-politespace-creditcard-maxlength attribute, politespace will also manage the field’s maxlength for you as well.

<input type="text" pattern="[0-9]*" data-politespace data-politespace-creditcard data-politespace-creditcard-maxlength>

Uses the creditable dependency.

data-politespace-us-telephone

When using politespace with US specific telephone number fields, data-politespace-us-telephone option will automatically adjust the maxlength of the field to account for a US country code. If the user types a 1, the maxlength will be adjusted to add one additional character until the user blurs, when the country code will be stripped and the original maxlength restored.

Download

• politespace.js
• Optional: politespace-init.js, performs auto initialization, calls $( ".elements" ).politespace() for you.
• politespace.css

NPM

npm install politespace

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

Tests

Using the repo

Run these commands:

• npm install
• grunt as normal

License

MIT License

politespace's Issues

data-politespace-delimiter cannot be . (dot)

I am using this mask which is great, by the way. But I need the data-politespace-delimiter being dot, for brazilian money.
For example, R$ 4.500,00 (in Brazil, thousand delimiter is dot and decimal delimiter is comma).
Is there a way in which I can accomplish this task?

Add `data-politespace-creditcard` to readme

https://github.com/filamentgroup/politespace/blob/master/src/politespace-creditcard.js

Duplicate readings?

When I tab through the demo with VoiceOver On, I get duplicate readings of the value. Is this the intended/expected behavior?

Steps to reproduce:

1. Turn VoiceOver on
2. Tab to 2nd input example input[type=text] with maxlength="7"
3. VoiceOver reads the input with text selected.
4. Hit Tab again
5. VoiceOver reads the input with text unselected.

Remove spaces on focus doesn’t work in Chrome 34

Hi,

I tested the script on Chrome 34, Add spaces on blur works, but remove them on focus doesn’t:

Uncaught TypeError: Cannot read property 'replace' of undefined 

line 83.
Thanks.

phone number format too rigid, creates errors

Based on the demo, this can't be used on phone numbers: in very common use cases, it converts valid entered data into invalid data.

"1234567890" is converted to "123-456-7890" = OK
"[phone]" is converted to "(12-3) -4567" = Data error
"123 456-7890" is converted to "123- 45-6789" = Style error
"123 456.78.90" is converted to "123 456.78" = Data error

Make sure all data- attributes are properly namespaced

data-reverse and data-grouplength are two obvious ones. Should have data-politespace- prefix.

Set data-grouplength dynamically

A straightforward way to call jQuery.politespace() again to change attributes would be nice. I wanted to do that today and had to call jQuery.unbind() on the element then wrote a little helper to set my attributes.

I also initially tried setting attributes on the element with jQuery.data() then jQuery.prop() but found that the attributes were only read when I got the DOM object and used setAttribute(). I'm curious to know why this is the case or if I missed something.

Add prefix and suffix option

It would be really nice to allow adding a prefix or suffix to the formatted input (e.g. adding a '$' in front or back)

Safari 6 trims leading zeros on input type="number"

On both iOS and Mac OS. Fixed in Safari 7.

To reproduce: Type "02111" into the type="number" zip code field on http://filamentgroup.github.io/politespace/demo/demo.html

maxlength focus trims characters from the end

Focusing into a field after its value meets the maxlength will remove characters from the end of the value.

Look at removing `overflow: hidden` on politespace number wrapper

Affects the focus style on some default inputs (it’s clipped):

Alternatively, if we just want more visual weight on the outline, we could use outline-offset: -4px; which would make more of the outline visible specifically for these wrappered elements.

cc @toddparker

type="number" proxy element Screen Reader review

Make sure that the proxy element for type="number" elements works ok with screen readers.

DOM is re-arranged when Politespace is activated

If you have an input that uses Politespace, and say you have a span or some other DOM above or below the input it seems that Politespace will flip the position of these elements so that whatever was below the input becomes on top (and vice versa).
This requires me to wrap the input with a span or div which is not ideal.

Phone number country code is awkward with maxlength

maxlength=10 drops the last digit or formats incorrectly when the number leads with a US country code.

(internal conversation at https://filamentgroup.slack.com/archives/formcore/p1474659195000268)

Go to 1.0

Pure DOM version

Since finished transition of our codebase into React.js we do no longer need jQuery. And would be great to be able to use politespace even without jQuery as well.

data-politespace-us-telephone error

I listed my angularjs input box code below. I'm getting an error when I add data-politespace-us-telephone to the input box where if I try to enter a phone number starting with a 1 it registers as invalid. Is there a better attribute I could use to trim the beginning 1 off the input or another way to fix this?

<input id="phoneNumber" name="phoneNumber" numbers-only ng-model="form.phoneNumber" type="tel" required maxlength="12" ng-minlength="10" date-pattern="/^[0-9]$*/" ng-maxlength="12" data-politespace data-grouplength="3,3,4" data-politespace-us-telephone data-delimiter="-" >

Hong Kong and Macau phone numbers

HK: (+852) XXXX XXXX
Macau: (+853) XXXX XXXX

International phone number support/examples

See https://support.twilio.com/hc/en-us/articles/223183008-Formatting-International-Phone-Numbers

jQuery Version

Is there a reason why this needs < 2.0.0? I'm having issues with this working with a newer version of jQuery.

Labelmask option

Hi,
Are there still plans to integrate labelmask code into politespace? I think having that makes it a complete replacement for traditional input masks.
Thanks

Automatically normalize fields to maxlength

Right now politespace truncates the value to the maxlength. This might be unintuitive.

It may be more intuitive if the maxlength value represents the total length without whitespace. Then the maxlength would be the same as the total length the user would be allowed to type into the field.

grouplength = 2
maxlength = 5

Right now the user would be able to type in 5 characters, but the value would be truncated to 4 with one space on blur.

It might be more intuitive if the user could type in 4 characters, and the script dynamically changes the maxlength while the user is focused.

Unable to use arrows or forward-delete inside a Politespace input using Firefox browser

A user is not able to use arrow keys to move the type cursor back and forth in the input or use forward-delete key.

This has been reported and confirmed in Firefox.

Please see screen shot for example.

angular + table + ngrepeat

Is it possible to use it with angular in a table and ng-repeat?

"pattern" is not a valid attribute.

If possible, I would change this to data-pattern which would then be valid for html5.

Input type Number with placeholder doesn’t show placeholder until focus

<input type="number" data-politespace maxlength="7" placeholder="00000"> on Firefox 45 (Mac)

On load, the placeholder is not shown, probably hidden behind the proxy element.
On focus, the placeholder is shown.
The placeholder should always show if there is no value in the field.

Don't format the text on password inputs

We're having one case where we don't want to format input text on blur. We have a social security input, which has a format of xxx-xx-xxxx, and has a toggle checkbox to show/hide the text in the field. When you click to hide the text in the field, the input is turned into a password type. In this case, we don't want any formatting to happen on blur because it confuses users since extra * are added to the now, password field.

I was thinking this could be solved of one of two ways:

• Provide a method on the politespace jQuery object to temporarily unbind the blur event to format the text.
• Ensure the formatting on the blur event doesn't happen at all to inputs of type password.

I could potentially submit a PR, but would appreciate what direction would be better.

Thanks for writing this code!

Requiring `Enhance`

Please correct me if I'm wrong, but it looks like this is necessary for politespace to work:

<script>
    jQuery( function(){
        jQuery( document ).trigger( "enhance" );
    });
</script>

I pulled the demo and removed this and it all stopped working. It is not documented either. Can you tell me more about what it does?

Thank you

Working Webpack/Angular2 example

Is it possible to get an example of this working with Webpack and possibly also Angular2?

I'm trying to import the built file in the vendor.js file with the following:

import 'node_modules/politespace/dist/politespace.js

And am triggering the enhance event on document every time the page changes in an Angular2 project like so:

export class AppComponent {
  constructor (private router: Router) {
    router.events.subscribe((val) => {
      $(document).trigger("enhance");
    });
  }
}

But I get an error on https://github.com/filamentgroup/politespace/blob/master/dist/politespace.js#L314 that Politespace is not defined.

Tracing the code to where Politespace is supposed to be defined, I can see that on https://github.com/filamentgroup/politespace/blob/master/dist/politespace.js#L189 in the demo code in this project, w is the Window object, whereas in Webpack, it seems to be an empty object, which is why line 314 above isn't recognizing Politespace.

add pre-built file on npm

hi, recently we add your lib on https://cdnjs.com by manually building, could you please consider adding pre-build file on npm package so that we can use npm auto-update to add later released versions automatically.
thank you very much!

https://cdnjs.com/libraries/politespace
cdnjs/cdnjs#7407

Opera Mini rendering issue with number proxy

Provide unformatted data

Thanks for the great & polite plugin! ❤️

There doesn't seem to be a method to obtain the raw unformatted input value.

If I use $('input').val(), I get a politespace formatted value.

I think a data-attribute would be ideal, something like data-raw-value. Alternatively you could add a method for us to use the unformat function.