https://github.com/tpmanc/js-mask

Javascript mask input
https://github.com/tpmanc/js-mask

javascript js-mask vanilla-js

Last synced: 2 days ago
JSON representation

Javascript mask input

• Host: GitHub
• URL: https://github.com/tpmanc/js-mask
• Owner: tpmanc
• Created: 2016-07-19T12:31:16.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-09-22T11:29:30.000Z (over 7 years ago)
• Last Synced: 2024-03-11T03:43:21.688Z (10 months ago)
• Topics: javascript, js-mask, vanilla-js
• Language: JavaScript
• Homepage: http://js-mask.chukancev.ru/
• Size: 13.7 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Js mask

Written in vanilla JS library to add phone mask to your input elements.

## Demo

[Phone mask demo](http://js-mask.chukancev.ru/)

## Requirements

* none

Library is written in vanilla JS and has no dependancies.

## Getting Started

### Download

* [development version](https://raw.githubusercontent.com/tpmanc/js-mask/master/js-mask.js)

* [minified version](https://raw.githubusercontent.com/tpmanc/js-mask/master/js-mask.min.js)

### Bower

Install via bower: `bower install --save js-mask`

## How to use

```html

   

   

      

      

      

   

```

Add mask to input:

```javascript

var inputs = new PhoneMask(document.querySelectorAll('#phone'));

```

To customize functionality pass settings as second parameter:

```javascript

var inputs = new PhoneMask(document.querySelectorAll('#phone'), {

  pattern: '(xx) xxxx-xx-xx',

  prefix: '+7 ',

  patternChar: 'x'

});

```

To destroy phone mask:

```javascript

var inputs = new PhoneMask(document.querySelectorAll('#phone'));

// destroy mask

inputs.destroy();

```

## Settings

|Setting|Type|Default Value|Description|

|---|---|---|---|

|pattern|String|`'(___) ___-__-__'`|Input formatting pattern|

|patternChar|String|`'_'`|Characters in pattent to replace by entered characters|

|prefix|String|`''`|Phone number prefix|

|igrogeKeyCodes|Array|`[9, 16, 17, 18, 36, 37, 38, 39, 40, 91, 92, 93]`|Array of key codes to ignore|

|allowedRegExp|Pattern or false|`/^\d$/`|RegExp pattent for entered characters|