{"id":18889752,"url":"https://github.com/scottlogic/finput","last_synced_at":"2025-04-14T23:30:57.276Z","repository":{"id":57236493,"uuid":"49269412","full_name":"ScottLogic/finput","owner":"ScottLogic","description":"A vanilla-JS financial amount input control","archived":false,"fork":false,"pushed_at":"2020-01-28T09:28:05.000Z","size":1163,"stargazers_count":23,"open_issues_count":18,"forks_count":11,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-13T14:45:09.565Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://scottlogic.github.io/finput","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ScottLogic.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-01-08T11:53:15.000Z","updated_at":"2025-01-13T08:26:04.000Z","dependencies_parsed_at":"2022-08-23T16:20:18.995Z","dependency_job_id":null,"html_url":"https://github.com/ScottLogic/finput","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ScottLogic%2Ffinput","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ScottLogic%2Ffinput/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ScottLogic%2Ffinput/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ScottLogic%2Ffinput/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ScottLogic","download_url":"https://codeload.github.com/ScottLogic/finput/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248978475,"owners_count":21192797,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-08T07:50:43.620Z","updated_at":"2025-04-14T23:30:56.964Z","avatar_url":"https://github.com/ScottLogic.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"finput  \n![Travis build status](https://travis-ci.org/ScottLogic/finput.svg?branch=master)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n======\n\nA vanilla-JS financial amount input control. Supports the following features:\n\n* auto-formatting\n* prevents invalid input whether typed, dragged or pasted\n* 'k', 'm', 'b', etc. multiplier keys\n\nRequired Browser Features\n-------------------------\n\nThe below table lists features that `finput` requires in order to function properly. If you wish to use `finput` with a browser that does not support a required feature then using the suggested polyfill may help. Note that there may be more appropriate polyfills than the ones listed.\n\n| Required Feature | Suggested Polyfill |\n|-|-|\n| [KeyboardEvent.key](https://caniuse.com/#feat=keyboardevent-key) | [keyboardevent-key-polyfill](https://www.npmjs.com/package/keyboardevent-key-polyfill) |\n| [Symbol](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Symbol) | [babel-polyfill](http://babeljs.io/docs/usage/polyfill)\n\nUsage\n-----\nSee an example finput [here](http://scottlogic.github.io/finput)\n\n#### Install package\n`npm install finput`\n\n#### Initialise input\nTo initialise the finput, simply pass the element and any options into the finput constructor.\nAn object is returned which allows you to interact with the finput API.\n\nOptions\n-----\n\n##### scale\nType: `Number`  \nDefault: `2`\n\nMaximum number of decimal digits the value can take\n\n##### range\nType: `string`  \nDefault: `ALL`\n\nThe possible range of values that the value can take\n\nPossible Values:  \n- `'ALL'`: Number can take any value  \n- `'POSITIVE'`: Number can only be positive\n\n##### fixed\nType: `Boolean`  \nDefault: `true`  \nIf true, after focus is lost value is formatted to *scale* number of decimal places\n\n##### thousands\nType: `string`  \nDefault: `,`  \nThe character used to separate thousands in the formatted value.\n`E.g. 1,000`\n\n##### decimal\nType: `string`  \nDefault: `.`  \nThe character used for the decimal point\n\n##### shortcuts\nType: `Object { character: multiplier }`  \nDefault: `{\n  'k': 1000,\n  'm': 1000000,\n  'b': 1000000000\n}`  \nAn object mapping of shortcuts that the user can use to quickly enter common values.\nE.g. with the default shortcuts, typing `k` will multiply the number value by 1000\n\n##### onInvalidKey\nType: `Function(e)`  \nDefault: `() =\u003e {}`  \nA callback function that is fired each time a invalid key is pressed.\nthe callback is called with the [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) object that was raised on keydown.\n\n##### onFocus\nType: `Function(e)`  \nDefault: `undefined`  \nA callback function that is fired each time the input is focussed.\nthe callback is called with the `Event` object.\n\nthe function used needs to return an object with a start and end value, a numerical\nrepresentation of the postions to select. \n\n`{\n  start: 0,\n  end: 1\n}`\n\nsetting both values to 0 or failing to return both values will disable selecting functionality\n\nAPI\n--------------------\n\nThe following properties are exposed on the returned finput instance:\n\n##### options\nRetrieves the options on the input\n\n##### rawValue\nRetrieves the raw value of the input (numerical)\n\n#### value\nRetrieves the formatted value of the input (string)\n\nThe following functions are exposed on the returned finput instance:\n\n##### setOptions\nSets the options on the input\n* `options` New options to set. Copied before being set.\n\nNote that `setOptions` supplements the current options rather than replacing. \n```\nelement.setOptions({ thousands: '.' });\nelement.setOptions({ decimal: ',' });\n```\nThe above therefore results in the following `options`:\n```\n{\n  thousands: '.',\n  decimal: ','\n} \n```\n##### setValue\nSets the value, fully formatted, for the input\n * `val` New value to set\n * `notNull` When true, restricts setting the value if it is null.\n\n##### setRawValue\nSets and formats the value for the input\n * `val` New value to set\n \n##### removeListeners\nRemoves finputs listeners from the provided element, returning it to a standard native control\n\nDeveloping\n----------\n\nInstall dependencies:\n- `npm install`\n\nAdding dependencies:\n- Do not commit `yarn.lock`\n- Do commit `package-lock.json`\n\nRun dev server:\n- `npm start`\n\nBuilding Library\n----------------\n- `npm run build:dev` - Builds a development friendly version of the application\n- `npm run build:prod` - Builds a minified version of the application\n- `npm run compile` - Compiles typescript dependency-free version of library\n\nRunning tests\n-------------\n\nExecute the tests locally:\n\n- `npm test`\n\nThis takes care of doing the following:\n- Updating webdriver server\n- Starting background webdriver server\n- Starting background web server\n- Starting tests\n- Shutting down webdriver server, webserver and tests\n\nThe tests can be run for CI using:\n- `npm run test:ci`\n\nThis is the same as `npm test` but it does not update or start webdriver. We assume that CI/Browserstack takes care of webdriver for us.\n\nReleasing\n---------\n\n[semantic-release](https://github.com/semantic-release/semantic-release) is used with Travis CI to perform releases on merged PRs to `master` branch.\n\nCommit messages must follow [AngularJS Commit Message Conventions](https://github.com/semantic-release/semantic-release#default-commit-message-format) for `semantic-release` to correctly choose the next version.\n\nIf the Travis CI build for a new release is successful, it is published to npm.\n`./lib/finput.js` is used by npm installs, and `./dist/finput.min.js` is \nautomatically served by [UNPKG](https://unpkg.com/) CDN at `https://unpkg.com/finput@latest/dist/finput.min.js` to directly load finput \nin a browser environment.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscottlogic%2Ffinput","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscottlogic%2Ffinput","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscottlogic%2Ffinput/lists"}