Socket
Socket
Sign inDemoInstall

@formio/vanilla-text-mask

Package Overview
Dependencies
0
Maintainers
4
Versions
2
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@formio/vanilla-text-mask

JavaScript function that makes input HTML element accept mask pattern


Version published
Maintainers
4
Weekly downloads
30,543
decreased by-0.65%

Weekly downloads

Readme

Source

JavaScript Input Mask

Note: IE9 is not supported in this module.

Getting started

First, install it.

npm i vanilla-text-mask --save

Then, use it as follows:

<script
  type="text/javascript"
  src="./node_modules/vanilla-text-mask/dist/vanillaTextMask.js"></script>
<script type="text/javascript">
  var phoneMask = ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]

  // Assuming you have an input element in your HTML with the class .myInput
  var myInput = document.querySelector('.myInput')

  var maskedInputController = vanillaTextMask.maskInput({
    inputElement: myInput,
    mask: phoneMask
  })
  
  // Calling `vanillaTextMask.maskInput` adds event listeners to the input element. 
  // If you need to remove those event listeners, you can call
  maskedInputController.destroy()
</script>

Documentation

As you can see in the code above, you are passing an object to vanillaTextMask.maskInput(...).

The object takes inputElement, which is the <input/> element that you are masking. It also accepts other values which are documented here.

Example

To see an example of the code running, follow these steps:

  1. Clone the repo, git clone git@github.com:text-mask/text-mask.git
  2. cd text-mask
  3. npm install
  4. npm run vanilla:dev
  5. Open http://localhost:3000

The code of the example is in vanilla/example.

Contributing

We would love some contributions! Check out this document to get started.

Keywords

FAQs

Last updated on 13 Sep 2022

Did you know?

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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc