Package Exports

input-simple-mask
input-simple-mask/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (input-simple-mask) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Input Simple Mask

Do not use on production

Implement a simple mask for input effortlessly using the InputPhoneMask function. This function accepts various parameters to tailor the input behavior according to your needs.

Usage

Js

    window.InputPhoneMask({
        input: "input",                   // ID of the input element
        mask: "0000 0000 0000 0000",      // Mask for formatting the input.
        onChange: (value) => console.log(value), // Callback function triggered on input change
        placeholderChar: "-",                 // The character shown exept of "0" in the mask
    });

React

    import { SimpleInputMask } from "input-simple-mask";

    <SimpleInputMask
        mask={"+76 000-000-000"}
        placeholderChar={"_"}
        onChange={(maskedValue) => {
            // your code ...
        }}
        render={(props) => (
            // Input should accept the 'ref' parameter 
            <input {...props} /> // Do not pass the input value
        )} 
    />  
    // input value = +76 ___-___-___
    // The digits (except for zero) are part of the mask and will not change upon input. 
    // But can be only at start of mask, not between 0

    import { SimpleInputMask } from "input-simple-mask";

    <SimpleInputMask
        mask={"0000 0000 0000 0000"}
        placeholderChar={"_"}
        onChange={(maskedValue) => {
            // your code ...
        }}
        render={(props) => (
            // Input should accept the 'ref' parameter 
            <input {...props} /> // Do not pass the input value
        )} 
    />

Parameters

input: ID of the input element to apply the mask to.
mask: A string defining the mask for formatting the input. Use "0" for editable parts and any other character for fixed parts of the mask.
onChange: A callback function that receives the current value or masked value on input change.
placeholderChar: The character to be displayed instead of "0" in the mask.

Example

If mask is set to "00-00" and placeholderChar is set to "_", the input will display "__-__".