import NumberInput from 'basis-input-masking/src/NumberInput/NumberInput.js'

public class | source

NumberInput

The NumberInput will wrap text inputs and apply the given bbj Number mask

Options

Options can be passed via data attributes . For data attributes, append the option name to data-, as in data-mask

Option	Default	Description
mask		The bbj number mask @see BBj Number Masks
min		The maximum value to accept for this input
max		The minimum value to accept for this input
step		A stepping interval to use when using up and down arrows to adjust the value, as well as for validation
grouping-separator	,	a char which will be used as a grouping separator
decimal-separator	.	a char which will be used as a decimal separator
force-trailing-zeros	false	Affects the output by switching the way a mask with "#" characters in the trailing positions is filled. for example, the function NumberMask.mask(.10:"#.##") returns .10 instead of .1

Example :

 <input class="bbj-number-masked" name="test" id="test" value="1234" data-mask="##,##0">

 <script>
   document.addEventListener('DOMContentLoaded', function (e) {
     new Basis.InputMasking.NumberInput({

        // @param {String} valueMasked  masked value
        // @param {Number} valueUnmasked  original value
        // @param {HTMLInputElement} input the actual input instance
        onUpdate: (valueMasked, valueUnmasked, input, isApplied, isInitial) => {
           // do something
        },

        // @param {String|Object} error last occurred error. could be mask error or validation error
        // @param {HTMLInputElement} input the actual input instance
        onInvalid: (err , input) => {
           // do something
        }
     })
   })
 </script>

Constructor Summary

Public Constructor
public	constructor(options: Object) Construct new NumberInput

Member Summary

Public Members
public	options: {...undefined: Object, ...options: Object}

Method Summary

Public Methods
public	destroy() Unwrap the input elements and remove attached listeners
public	refresh() Initialize the component and wrap the input elements for masking in case they are not wrapped yet

Public Constructors

public constructor(options: Object) source

Construct new NumberInput

Params:

Name	Type	Attribute	Description
options	Object	nullable: true	The input options.
options.elements	HTMLElement \| String	optional default: ".bbj-number-masked"	The class name or the node to use
options.document	HTMLDocument	optional default: document	Document instance to use
options.cssClassError	String	optional default: "bbj-mask-error"	A css class to attach to the input when it is invalid
options.cssClassSuccess	String	optional default: "bbj-mask-success"	A css class to attach to the input when it is valid after the user interaction
options.onUpdate	Function	optional default: null	A callback to be called on the new masked value is set
options.onInvalid	Function	optional default: null	A callback to be called on the input or the mask is invalid

Public Members

public options: {...undefined: Object, ...options: Object} source

Public Methods

public destroy() source

Unwrap the input elements and remove attached listeners

public refresh() source

Initialize the component and wrap the input elements for masking in case they are not wrapped yet