filamentgroup / politespace Goto Github PK

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

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?

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

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.

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.

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.

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.

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

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

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.

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

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

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
"(123) 456-7890" 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

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

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

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!

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

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

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)

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

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="-" >

<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.

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

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.

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

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

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.

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

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.

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.