FieldKit

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.

Credit Card Fields

The CardTextField and AdaptiveCardFormatter provide formatting for credit card PANs, preventing the input of non-digit characters and automatically breaking into digit groups according to the rules for the entered card type.

<input type="text" id="card-number" placeholder="1234 5678 9012 3456">
<div id="card-type">Card type: <span id="card-type-span">Unknown</span></div>

var field = new FieldKit.CardTextField(document.getElementById('card-number'));
field.setCardMaskStrategy(FieldKit.CardTextField.CardMaskStrategy.DoneEditing);
field.setDelegate({
  textDidChange: function() {
    var cardTypeString = field.cardType() || 'unknown';
    document.getElementById('card-type-span').innerHTML = cardTypeString;
  }
});

NumberFormatter

The NumberFormatter provides formatting for all kinds of numbers, percentages, currencies, etc.

<input type="text" id="number">

var field = new FieldKit.TextField(document.getElementById('number'));
field.setFormatter(new FieldKit.NumberFormatter()
  .setNumberStyle(Math.random() < 0.5 ?
    FieldKit.NumberFormatter.Style.PERCENT :
    FieldKit.NumberFormatter.Style.CURRENCY));
field.setValue((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);

ExpiryDateField / ExpiryDateFormatter

The ExpiryDateField wraps ExpiryDateFormatter for credit card expiry dates, preventing the input of nonsense months or non-date characters. It also adds the preceding zero and the slash between the month and year automatically, but treats them as if they are not there. In order to do this predictably it forces the cursor to remain at the end of the field and prevents any kind of selection.

<input type="text" id="expiry" placeholder="mm/yy">

new FieldKit.ExpiryDateField(document.getElementById('expiry'));

SocialSecurityNumberFormatter

The SocialSecurityNumberFormatter provides formatting for US Social Security numbers, preventing the input of non-digit characters and automatically breaking into digit groups like NNN-NN-NNNN.

<input type="text" id="ssn" placeholder="123-45-6789">

var ssnFormatter = new FieldKit.SocialSecurityNumberFormatter();
new FieldKit.TextField(document.getElementById('ssn'), ssnFormatter);

PhoneFormatter

The PhoneFormatter provides formatting for phone numbers, preventing the input of non-digit characters and automatically formatting like (NNN) NNN-NNNN.

<input type="tel" id="phone" placeholder="(415) 555-1212">

new FieldKit.TextField(document.getElementById('phone'), new FieldKit.PhoneFormatter());