You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

mask-input

Package Overview
Dependencies
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

mask-input

Mask input component. Allow to input formatted values with fixed length or apply custom formatting function, to format values with any length

1.0.3
latest
Source
npmnpm
Version published
Weekly downloads
441
-6.37%
Maintainers
1
Weekly downloads
 
Created
Source

Vanilla mask-input component.

This component helps you create any formatted inputs such as phone number, credit card or birth date. This component assume, that you won't use react on project. If you use react, see react-maskinput or react-numberinput — react masked input components.

Watch demo: http://xnimorz.github.io/vanilla-masked-input/

Other components

  • react-maskinput — react masked input,
  • react-numberinput — react numeric input,
  • input-core — the core module on top of which you can build any custom components,

Supports

Tested:

  • IOS Safari 11
  • Google Chrome
  • Safari
  • Mozilla Firefox

Not Tested:

  • IE, EDGE, Mobile IE
  • Android Browser
  • Mobile Chrome

Installation

npm install --save mask-input

or

yarn add mask-input

Usage

Mask input receive in constructor props:

import MaskInput from 'mask-input';

const maskInput = new MaskInput(document.querySelector('.js-input-selector'), {
  mask: '0000-0000-0000-0000',
  alwaysShowMask: true,
  maskChar: '_',
});

How to change params in runtime

To change props you can use setProps method:

this.maskInput.setProps({ mask: '0000-0000' });

VanilaJs maskInput support all props, that support react-maskinput: https://github.com/xnimorz/masked-input/tree/master/react-maskinput

Contributing

  • Fork it!
  • Create your feature branch: git checkout -b my-new-feature
  • Commit your changes: git commit -m 'Add some feature'
  • Push to the branch: git push origin my-new-feature
  • Submit a pull request

Changelog

1.0.2 Fix filename mismatch ( thanks to @makenosound )

1.0.1 Move vanilla mask input to separate repository, use prettier to unify formatting

1.0.0 several changes:

  • From this moment all of tools will have similar version

  • Added examples using components with another libs, such as styled-components

  • Improved demo page

  • Improved readme

    0.1.4 use input-core@0.1.2

    0.1.3 Add e.which to input event callback to support iOS@9.4

    0.1.2 Add android support, remove transform-react-jsx from mask-input build

    0.1.1 Fix bug with removing static symbol

    0.1.0 First publish

License

MIT

Keywords

mask

FAQs

Package last updated on 28 Nov 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts