Comments (6)
I have had interest in solving this problem, unfortunately, I haven't been able to determine if it falls in the scope of this library. Currencies behave differently than patterns that Formatter currently handles. A currency pattern would consist of anchors at both the start and end with a repeating pattern in the middle.
example
user input moves from right to left
1] $0.00
2] $0.01
3] $0.12
4] $1.23
middle section grows
5] $12.34
.
.
x] $1,234,567,8.90
Besides trying to figure out the mess of logic that would allow this functionality (internally), I would need to find a way to expose it to the user. Possibly along the lines of:
var formatted = new Formatter(document.getElementById('input-currency'), {
'pattern' : Formatter.currency
});
I am leaning towards the idea of this problem being solved in a separate library.
from formatter.js.
Yeah, I knew there would be a bit of complexity for this functionality. Is your inclination of the problem being out of scope based on the goals of this library or merely the level of complexity/time commitment? IMHO I feel like it's a good candidate for the scope of this library. It is still formatting an input.
I know very little as to how the library works currently, but would expanding the options (and obviously the function of the library) like the following possibly work?
var formatted = new Formatter(document.getElementById('input-currency'), {
'prefix' : '$',
'pattern' : '{{999}},',
'suffix' : '.{{99}}',
'direction' : 'left'
});
from formatter.js.
Currency in general is more complex than what's being discussed here. You have number formatting, which can switch the , and . or use spaces, and currency indicator placement.
eg. 1,234.00, 1.234,00, 1 234,89 and $1,234.00 vs 1.234,56 € (german)
It only gets more complex, but those are some of the common things worth noting.
from formatter.js.
@jejacks0n couldn't the examples you provided be handled (in theory) if the options I listed were made available?
var formatted = new Formatter(document.getElementById('input-currency'), {
'prefix' : '',
'pattern' : '{{999}}.',
'suffix' : ',{{99}} €',
'direction' : 'left'
});
from formatter.js.
@dcalhoun I like the options you provided. I am unsure if they will cover all currency use cases (as I have 0 expertise in this area), however they still seem helpful. It will take some time to complete (limited time to work on this task) but I will begin implementation.
from formatter.js.
@jaridmargolin thanks for the update. I know it's a good bit of work, but I'm glad to see the willingness to include new ideas. Thanks a lot!
from formatter.js.
Related Issues (20)
- Backspace only remove placeholder chars when immediately following them.
- require jquery instead of jQuery HOT 2
- Trigger Formatter to update a field? HOT 2
- Doesn't work on chrome for android in Kitkat HOT 4
- Password field support
- Incorrect focus when 'persistent': true HOT 8
- NPM HOT 6
- Upper and Lower case
- key "T" is allowed in chrome and internet explorer HOT 5
- No formatting on Android 5 (Lolipop) HOT 1
- Typescript definition file for formatter.js
- How to create a formatted field prices?
- Browser Autofill not triggering re-format HOT 2
- Defining jQuery instead of jquery breaks webpack HOT 1
- listening on input change events does not works HOT 1
- there is something wrong in safari---can't format the input text and the caret has wrong position
- The 't' character is not allowed.
- resetPattern() - Doesn't remove previously applied pattern. HOT 1
- Uncaught TypeError: Cannot read property 'fn' of undefined HOT 1
- Limit value in currency
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from formatter.js.