[javascript] input type formatter, Patterns - 포멧 패턴

전화번호 입력 포멧

 

http://firstopinion.github.io/formatter.js/demos.html

Formatter.js: Conform user input to predefined patterns

Formatter.js is a simple jQuery utility that will reformat user input to predefined pattern. For example, if your user inputs a phone number, Formatter.js will insert dashes or parentheses in appropriate places.

Homepage: http://firstopinion.github.io/formatter.js/
GitHub: https://github.com/firstopinion/formatter.js
Docs: http://firstopinion.github.io/formatter.js/index.html
Demo Page: http://firstopinion.github.io/formatter.js/demos.html

 

formatter.js

   ___                    __  __              _   
  / _/__  ______ _  ___ _/ /_/ /____ ____    (_)__
 / _/ _ \/ __/  ' \/ _ `/ __/ __/ -_) __/   / (_-<
/_/ \___/_/ /_/_/_/\_,_/\__/\__/\__/_/ (_)_/ /___/
                                        |___/     

Format user input to match a specified pattern

Demos/Examples

view demo

Why?

Sometimes it is useful to format user input as they type. Existing libraries lacked proper functionality / flexibility. Formatter was built from the ground up with no dependencies. There is however a jquery wrapper version for quick use.

On Bower

bower install formatter

Usage

Vanilla Javascript

• uncompressed: formatter.js
• compressed: formatter.min.js

new Formatter(el, opts)

var formatted = new Formatter(document.getElementById('credit-input'), {
  'pattern': '{{999}}-{{999}}-{{999}}-{{9999}}',
  'persistent': true
});

Jquery

• uncompressed: jquery.formatter.js
• compressed: jquery.formatter.min.js

$(selector).formatter(opts)

$('#credit-input').formatter({
  'pattern': '{{999}}-{{999}}-{{999}}-{{9999}}',
  'persistent': true
});

Opts

• pattern (required): String representing the pattern of your formatted input. User input areas begin with {{ and end with }}. For example, a phone number may be represented: ({{999}}) {{999}}-{{999}}. You can specify numbers, letters, or numbers and letters.
  • 9: [0-9]
  • a: [A-Za-z]
  • *: [A-Za-z0-9]
• persistent: [False] Boolean representing if the formatted characters are always visible (persistent), or if they appear as you type.

 

 

•