jaridmargolin / formatter.js Goto Github PK

Windows special keys need to behave natively.

• Home
• End
• Delete

Originally referenced in issue #2

When i use my own regex

$.fn.formatter.addInptType('D', /[A-Za-z0-9.]/);

$('#web').formatter({
'pattern': 'http://www.{{DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD}}',
'persistent': true
});

Like this

When i start to type github.com for example it goes back right after c

In this case when i type directly github it becomes like this

github.omc

Can't solve this issue thank you

It would be nice to have a third option for placeholder text.

Ex:
new Formatter(birthDateInput, {
'pattern': '{{99/99/9999}}',
'persistent': true
'placeholder': 'MM/DD/YYYY'
});

Currently binding Formatter to the window (terrible). I like how underscore esposes itself:

http://underscorejs.org/docs/underscore.html

Allows for it to be shimmed if necessary.

The unminified version of formatter.js are fine, but the minified ones are using "require" - both the jquery and non-jquery versions are affected. The un-minified versions work just fine after getting minified/uglified.

So i have this number in my input value 608291461.
Also i have formatter setup to .formatter({ 'pattern': '+48 {{999}} {{999}} {{999}}', 'persistent': true }). After transformation by formatter in my input 8 number from 608 disappears and result is only a +48 602 914 64.

On IE7, no Javascript error, and the typed text is not visible.
Even the initialized text by html value is not visible.
Works well on IE8.

Tested on master and the 5 days ago masters's version.
jquery version : 1.8.3

When foreign languages are enabled for the keyboard, the accents associated with that language can still be triggered. Formatter ignores them once a number is struck, but they still show when typing.

Caret position does not update when characters are added mid string, and the max length is exceeded.

I have a classic pattern for credit cards
pattern: '{{9999}} {{9999}} {{9999}} {{9999}} {{99}}'
When I try to enter the number in Opera Mobile, every digit is entered twice, so I have to delete an extra char.

Perhaps it would be possible to add a bower.json and configure the ignore list to leave out anything that doesn't need to be there?

hola, creo que debería haber una la posibilitad de agregarle un hover de los espacios

I want to format phone number on input.
If I use single 'pattern' option everything is fine.
But if I use something like this:
'patterns': [
{ '^\d{5}$': '{{9}} {{99}} {{99}}' },
{ '^\d{6}$': '{{99}} {{99}} {{99}}' },
{ '^\d{7}$': '{{999}} {{99}} {{99}}' },
{ '': '{{*******************}}' }
],
'persistent': false
after 5th digit my cursor is not at the end but between 4th and 5th symbol.

Is there a way to target the pattern separator in order to change its color?

Try this fiddle in mobile Chrome 34 under Android (haven't tested on iOS). Only digits are allowed, but you can input anything there and the input mask is not replaced, but just shifts as user inputs.
Formatter version is 0.1.4.
Code of this fiddle: http://jsfiddle.net/th0r/FAH8u/

The input field messes up if a user highlights some text, drags, and then releases.

1. Input Text

2. Highlight Section

3. Drag + Release

Adding an input event and reformatting when it's fired seemed to fix the problem. Here's the gist.

Error occurred in chrome 35.0.1916.114 on mac os x 10.9.3
Error: Uncaught TypeError: Cannot read property 'createRange' of undefined.

Probably a bug in Chrome, works in firefox and safari.

Would it be possible to implement forced capitalization in patterns? Specifying 'A' instead of 'a' for auto capitalization, for example?

Hi there,

in the jQuery version you should use "jQuery" instead of its short version "$". the short version could be overwritten by other libraries.

Thanks,

Jakob

In Mozilla, arrow keys trigger the 'keypress' event. The keypress handler assumes it is a character keystroke and calls preventDefault, causing the key to not be handled correctly.

There's a special code in jQuery wrapper that prevents multiple instances of Formatter to be created which is good. The issue come when you seriously need to change pattern on the go. Typical example is credit cards one. Master Card, Visa and Discover all good with 4 groups of 4 digits. 16 total. American Express instead has 3 groups with 4, 6 and 5 digits. 15 total. Which card user types in you can get by first digit - it's 3 for Amex. Of course you can delay instantiation until user types first digit but what if he changes his mind later?

Input's value can be changed even with a readonly attribute set.
Browsers: FF 30, Chrome 34.

when i use formatter in android webview, it is formatter is {{999}} {{9999}} {{9999}}, when i input to 4rd number, the inptSel go to the error position, can you fix it ?

$('#credit-input').formatter({
  'pattern': '{{999}}-{{999}}-{{999}}-{{9999}}'
  'persistent': true
});

Should be read :

$('#credit-input').formatter({
  'pattern': '{{999}}-{{999}}-{{999}}-{{9999}}',
  'persistent': true
});

When an element is marked as readonly and a pattern is applied to it, the user is able to manipulate the element's value.

Do you have any plans to add support for formatting inputs for currency values (e.g. – $#,###.##)?

Maybe something along the lines of this...

var formatted = new Formatter(document.getElementById('input-currency'), {
  'pattern' : '${{9}},{{999}}.{{99}}'
});

Thanks for your work.

On Android devices were you have a phone number pattern ,the number is typed out of order. When you hit a number it goes in front of the previous number.

I am using this pattern:

'pattern': '({{999}}) {{999}}-{{9999}}'

If I use this pattern:

'pattern': '{{9999999999}}'

It works.

Android Version: 2.2.2
Android Version: 4.0.3

The formatting options are great... but as a user it bugs me that the usability of the text fields have been compromised as a result of the library.

For example the arrow keys (left, right) no longer navigate within the text field should the user want to correct a typo.

The delete key (on a PC) should "erase" characters to the right of the cursor/caret yet currently erases characters to the left like a backspace key.

The shift key has been disabled so manually selecting multiple characters to delete/type over is not possible.

The Home key does not take the user's cursor/caret to the beginning of the field/line... nor does the End key take the user to the end of the field/line.

http://firstopinion.github.io/formatter.js/demos.html link is broken.

When focus is on formatted input pressing tab key doesn't move focus to the next form field.
Formatter version is 0.0.9

It may be related to how you convert formatter.js to CommonJS, but all of the require statements for internal modules are not using relative paths.

In the main file (dist/common/formatter.js:8-10) the require statements should be like this:

var patternMatcher = require('./pattern-matcher');
var inptSel = require('./inpt-sel');
var utils = require('./utils');

Notice the relative paths being used. The compiled CommonJS files should all be using relative paths for in-module requires 😄

Backspace does not correctly work on formatted characters where persistent: true.

I tried to bind an event handler to the "change" event and it works fine for inputs where I don't use formatter.js and it catches no change event (doesn't work) when I use it on inputs where I applied formatter.js.

So using this http://api.jquery.com/change/ does not work. And I'm guessing trying to catch other events won't work either. I saw an issue where users could not catch the "input" event for example (which, just to clarify, is not the same thing as the change event).

Surely it would make a lot more sense to accept a regex-compatable subset for a pattern? For example:

$('#credit-input').formatter({
  'pattern': '{{9999}}-{{9999}}-{{9999}}-{{9999}}'
});

Would end up as:

$('#credit-input').formatter({
  'pattern': '\d{4}-\d{4}-\d{4}-\d{4}'
});

just curious?

Does it need to update version and tag it?

The special keys list should be extended, it is not possible to go to the next form field by pressing tab, or submit the form by pressing enter. One more possible extention is also to support F5.

utils.isSpecialKey = function (k) {
  var codes = {
    '9' : 'tab',
    '13': 'enter',
    '35': 'end',
    '36': 'home',
    '37': 'leftarrow',
    '38': 'uparrow',
    '39': 'rightarrow',
    '40': 'downarrow',
    '116': 'F5',
  };
  // If del or special key
  return codes[k];
};

cheers

$('#_year').formatter({
'pattern': '{{9999}}'
});

You have tried to test it on mobile phone? It completely doesn't work..

Formatter fails with input number on Chrome Canary v34.0.1798.0

<input type='number' class='myNumber' placeholder='1' min='0' max='50' step='1'>

$('input.myNumber').formatter({ pattern: '{{99}}' });

with an error message visible in the console:

Uncaught InvalidStateError: Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection.

Any text or number can be typed it.

Apart from 999, can it work with AAA?

I have a form as below:

• field1 : text
• field2: formatted text, with 'persistent': true
• field3: formatted text, with 'persistent': true
• field4: text

When the form loads, field3 has the focus and I can only move the focus to field2. When trying to write on field1 or field4, the focus moves back to field3. It's only possible to write on field1 or field4 after field2 and field3 are filled.

This is fixed by removing the 'persistent': true of one of the formatted fields, field2 or field3.

I am using v0.1.5 with IE 11.

Hello,
We have just add Formatter.js to twittstrap resources list
https://twittstrap.com/resources/details/formatter
Under : Forms
Regards

In Chrome on Android event.clipboardData.getData('Text') returns empty string instead of actual clipboard data.
That is confirmed bug in chromium: https://code.google.com/p/chromium/issues/detail?id=369101

Is there any option to use repetition, e.g. {{99?}} or {{9{1,2}}}? This would allow to specify variable format like optional characters that may or may not be specified.

can I use this outside of a node?

– goal:

var formatted = new Formatter('123123123', '({999}) - ({999}, {999})'); // (123) - (123, 123)

There's any way to reach this?
Thanks.

How can I mask input to accept only 24-hour format? I've tried something like:
new Formatter(timeElems[i], {
'pattern': '{{99}}:{{99}}',
'persistent': false,
'patterns':[
{ '^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$': 'time: {{*****}}' }
]
});

but it doesn't work at all.

Currently it's not possible to unbind all events attached by formatter and disable it completely.

Such a feature would be really useful - just look at the issue #29. If it would be possible to disable the formatter we could still dynamically change the input type to "number" for mobile users.

When focus is on formatted input form submittion using enter key is not working.
Formatter version is 0.0.9

Formatter allows 't' to be typed in credit card demo, but not in phone number demo.

Discovered in Chrome on OS X.

Enabling formatter for example in an input element prevents to fire jQuery input event on that particular element. I consider this a bug.