⚠️ WARNING⚠️
If you are having problems please check the version that you are using.
This package follows the semantic versioning try to keep it updated with the latest version.
Simple money mask developed with pure JavaScript 🗃️ 0 dependecies, 🍃 Super light just 1.65kB gzipped, 🔒 100% Secure (no npm audit problems or dependabot issues) which you can run on Client Side and Server Side. Try live demo.
First install it:
npm i simple-mask-money --saveOr 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
After installed is just implement, for it choose the best example for you.
For use with React JS you can pass only the id:
import { useEffect } from 'react';
import { setMask } from 'simple-mask-money';
function InputMoneyComponent() {
useEffect(setMask('#my-input'), []);
return <input id="my-input" />
}If you prefer you can use a ref:
import { useEffect } from 'react';
import { setMask, useRef } from 'simple-mask-money';
function InputMoneyComponent() {
const inputRef = useRef(null);
useEffect(setMask(inputRef.current), []);
return <input ref={inputRef} />
}These are only the basic usage if you need configure some arguments you can check documentation about full api reference
Here is a usage example with Vanilla JS:
<body>
<!-- Set inputmode to numeric to show only numbers on mobile -->
<input id="my-input" />
<script src="./node_modules/simple-mask-money/lib/simple-mask-money.js"></script>
<script>
// Select the element
const removeMask = SimpleMaskMoney.setMask('#my-input');
// Convert the input value to a number, which you can save e.g. to a database:
SimpleMaskMoney.formatToNumber(input.value);
</script>
</body>These are only the basic usage if you need configure some arguments you can check documentation about full api reference
Here is a usage example with Vue JS:
<template>
<form>
<input type="text" id="my-input" />
</form>
</template>
<script>
import { setMask, formatToNumber } from 'simple-mask-money'; // import mask
export default {
mounted() {
SimpleMaskMoney.setMask('#my-input'); // set mask on your input you can passing a querySelector
},
beforeUnmount() {
SimpleMaskMoney.removeMask('#my-input'); // remove mask destroy listeners
},
}
</script>These are only the basic usage if you need configure some arguments you can check documentation about full api reference
Here is a usage example with Angular JS:
import { setMask, removeMask, formatToNumber } from 'simple-mask-money'; // import mask
import { Component, OnInit, AfterViewInit } from '@angular/core';
@Component({
template: '<input id="my-input" />'
})
export class InputMoneyComponent implements AfterViewInit, OnDestroy {
ngAfterViewInit() {
setMask('#my-input'); // set mask on your input you can pass a querySelector or your input element and options
}
ngOnDestroy() {
removeMask('#my-input'); // remove mask destroy listeners
}
}These are only the basic usage if you need configure some arguments you can check documentation about full api reference
Read the docs or chose your implementation to check an example:
- Clear the mask
- Remove listeners
- Allow type only numbers
- Block user to type non-numeric chars
- Allow negative numbers
- It permit user add a negative sign
- Allow choose if negative sign is before or after
- Allow lock the carret bar on end
- Allow choose how many fractionalDigits
- Allow choose decimal and thousands separators