simple-mask-money
simple-mask-money copied to clipboard
codermarcos
💰 Simple mask money is a light, safe and typed package to format money!
trafficstars
SimpleMaskMoney
WARNING
if you are having problems check the version you are using. The docs to old (2.x.x) version stay here
Simple money mask developed with pure JavaScript. To run on Client Side and Server Side. Try live demo
Getting Started
First install it:
npm i simple-mask-money --save
Or access the GitHub release directly:
<script src="https://github.com/codermarcos/simple-mask-money/releases/download/<RELEASE_VERSION_HERE>/simple-mask-money.js"></script>
Remember to replace <RELEASE_VERSION_HERE> with the latest version
Read the docs or chose your implementation:
- JavaScript
- Angular
- React
- Node
- Vue
Here is a usage example:
<body>
<!-- Set inputmode to numeric to show only numbers on mobile -->
<input id="myInput" inputmode="numeric" value="0,00">
<script src="./node_modules/simple-mask-money/lib/simple-mask-money.js"></script>
<script>
// configuration
const args = {
afterFormat(e) { console.log('afterFormat', e); },
allowNegative: false,
beforeFormat(e) { console.log('beforeFormat', e); },
negativeSignAfter: false,
prefix: '',
suffix: '',
fixed: true,
fractionDigits: 2,
decimalSeparator: ',',
thousandsSeparator: '.',
cursor: 'move'
};
// Select the element
const input = SimpleMaskMoney.setMask('#myInput', args);
// Convert the input value to a number, which you can save e.g. to a database:
input.formatToNumber();
</script>
</body>
Or if you prefer use the methods in your events
<body>
<!-- Set inputmode to numeric to show only numbers on mobile -->
<input inputmode="numeric" value="0,00">
<script src="./node_modules/simple-mask-money/lib/simple-mask-money.js"></script>
<script>
// Select the element
let input = document.getElementsByTagName('input')[0];
// Configuration
SimpleMaskMoney.args = {
afterFormat(e) { console.log('afterFormat', e); },
allowNegative: false,
beforeFormat(e) { console.log('beforeFormat', e); },
negativeSignAfter: false,
prefix: '',
suffix: '',
fixed: true,
fractionDigits: 2,
decimalSeparator: ',',
thousandsSeparator: '.',
cursor: 'move'
};
input.oninput = () => {
input.value = SimpleMaskMoney.format(input.value);
}
// Your send method
input.onkeyup = (e) => {
if (e.key !== "Enter") return;
// Returns the value of your input as a number:
SimpleMaskMoney.formatToNumber(input.value);
}
</script>
</body>
Metadata
171
Stars
20
Forks
Watchers
Owner
codermarcos
Metadata
💰 Simple mask money is a light, safe and typed package to format money!