square / field-kit

FieldKit lets you take control of your text fields.

FieldKit

FieldKit lets you take control of your text fields.

FieldKit provides real-time, text field formatting as users type. It simplifies input formatting and creates a more polished experience for users, while outputting standardized data.

Demo

See examples of built-in formatters and fields at the demo page.

Documentation

Please see our documentation for a more in depth overview.

Contributing

We’re glad you’re interested in FieldKit, and we’d love to see where you take it.

Please review CONTRIBUTING.md

field-kit's Issues

Build Wiki

Use `let` or `const` instead of `var` everywhere.

Unless there's a good reason for using var somewhere that I'm unaware of.

Hook up CI with Sauce Labs and Travis CI

• Sauce Labs
• Travis CI

Document `textFieldDidFailToParseString`

For example when typing credit card numbers into CardTextField.

PhoneFormatter steals focus when the page is loaded

Steps to reproduce:

1. Go to the demo page
2. Do not click any mouse button. Wait until the page is fully loaded, then hit keyboard key 1.

What is expected:

3 As the focus is not on any input control, the page should not change.

What happened actually:

3 The page suddenly scrolls from top to PhoneFormatter field, and "1" is input to the field.

It happens in Chrome 49.0.2623.87 m and IE 11, but not in FireFox 42.0.

None works in Chrome on Android

Phone number
Input 4151234567
Output (451) 345-672

Credit Card
Input 3725123456
Output 5123 4563 72

Number
Doesn't do anything

Newest Chrome on Android

Add dist files to public CDN

Backspace bug on Android

Holding backspace on Android can cause the caret to not match where FK thinks it is.

GHPages Building

Alternative Input Methods

(e.g. browser autofill, scan credit card, 1Password, etc.) fail to validate, even in desktop browsers. When this happens, the fields remain invalid even if the user manually edits the input text.

Demo: Number Formatter example not clear

Just a heads up, I think the number formatter example is broken on the demo page. Or maybe I just don't understand what it's trying to demo?

http://square.github.io/field-kit/

ExpiryDateField sometimes fails to work

See the screenshot that sometimes ExpiryDateField doesn't format my input.

I tested in http://square.github.io/field-kit/ .

To reproduce:

1. type "12/12"
2. use mouse to select all
3. type 4444444444444
4. The format is no longer respected.

Phone number not formatted correctly when deleting

fill in 1 [phone]

bug 1:
move cursor to right behind 1
press delete, it become [phone]

bug 2
move cursor to right before 8
press delete, it become 8 (888) 888 888

I think this problem happened during format switching, some weird stuff is happening with cursor position and delimiters.

Add better examples for formatters in wiki

Consider not checking in `lib/`.

We can simply have a prepublish script that builds into lib/ so the latest code will be included when we publish to NPM.

Enable password-like protection on sensitive fields like SSN

By default, browsers treat a password input with obfuscation in the form of character masking with circles. Likewise, sometimes users would enjoy similar protection on fields containing sensitive information like social security numbers. It'd be neat if Field Kit solutioned for this in a similar manner, with some kind of show/hide functionality in SSN fields.

Add animated GIFs to wiki

• Delimited Text Formatter
• Credit Card Formatters
• Expiry Date Formatter
• Number Formatter
• Phone Formatter
• Social Security Number Formatter

PROTIP: if you add the image here in the comment, you can grab the URL and use it in the wiki.

Firefox issue - event not defined

When using this code:

field.setFormatter({
  format: function(value){
    var val = $val;
    if ( event.charCode >= 48 && event.charCode <= 57) {
        val = value;
    }

I get an JS error in Firefox that event is not defined. How can I define this by default?

Make Expiry Date Formatter smarter

For example 1| typing 4 should become 01/4 not prevent entry.

19 digit Card Numbers

Look into a solution for 19 digit cards

backspace is not firing onchange event

I am using var ssnFormatter = new FieldKit.SocialSecurityNumberFormatter(); in my project with react.

However backspace is not firing onchange event.

compatibility with react

Hi guys,
great job with the library!

I was wondering if you are aware of any reason why this library wouldn't work 100% with react?
I succeeded using new FieldKit.CardTextField, but for some reason I am not having any luck with new FieldKit.CardTextField and new FieldKit.NumberFormatter, the field value simply doesn't reformat.

I can see people are posting code snippet specific for react interoperability
https://gist.github.com/pascallouisperez/605295fcf21db6175c12

which makes me think for some reason it could not work how of the box.

in case you confirm there are no issues I will extract a code snippet to complete the issue

Android Bug 369101

This is causing issues.
https://code.google.com/p/chromium/issues/detail?id=369101

Cleanup Demo Page

Better international telephone number support

We really only support numbers using the NANP right now, but we should have a formatter that better handles other country codes. For example, typing "[phone]" into such a field would format it as "[phone]" (maybe, I don't know the expected format in Panama).

Copy + paste for phone number fields doesn't work reliably

field-kit version
2.1.0

Copying and pasting phone numbers results in inconsistent formatting. The gif below demonstrates odd/inconsisten results in different situations.

Expected behavior is the following:

1. Highlight text to be replaced, then paste full number [phone].
2. The field contains a properly formatted phone number including all of the digits.

Browser Support List

Proper Browserify Handling

Right now our dist package has a conflict with require in browserify.

Currency formats

Currency doesn't seem to handle thousands or going out beyond 2 decimal places.

1200 is displayed as 1200 instead of 1,200

1.23434234 is displayed as 1.23434234

Create jQuery Plugin

Create an easy to use jQuery plugin version of FieldKit.

`textDidChange` doesn't have the current change set in some cases

If the formatter doesn't make any changes to an input, then textDidChange's field will not have the current change.

Build System Upgrades