From 60376593a9991f2ef0f6b68b6f4c7ba2944d6ce0 Mon Sep 17 00:00:00 2001 From: Philip Ermish Date: Thu, 24 Dec 2015 19:23:45 -0500 Subject: [PATCH] Update README.md --- README.md | 67 +++++++++++++++++++++++++++++++++++++------------------ 1 file changed, 45 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index 7fa6a9b..917bc0b 100644 --- a/README.md +++ b/README.md @@ -8,37 +8,60 @@ Ex. 123-45-6789 becomes xxx-xx-6789. ## How do I use it? -Include relevant js files - jQuery and jquery.inputcloak.min.js +### Include js files: +* jQuery +* jquery-inputCloak.min.js -Select page elements and apply cloaking to them, with default settings or customised ones, like +### Select any element and cloak them! ```javascript $('.yourpasswordinput').inputCloak(); ``` -OR + +## Examples + +Several options are available including pre-defined input types: + ```javascript -$('.yourpasswordinput').inputCloak({settings}); +$('.yourpasswordinput').inputCloak({ + type: 'ssn', + delay : 1000, + symbol : '*' +}); ``` -where settings is an object with as many as relevant of the following members: -\(default is shown first\) - - type: 'all' \('ssn','credit' or 'all' - for display respectively like \*\*\*-\*\*-1234,\*1234 or \*\*\*\*, - irrelevant if customCloak is used\)
- symbol: '\*' \(any single-char e.g. '\*',\u2022 \(dot\), 'x'\)
- delay: 0 \(mSec delay between blur event and cloak-application\)
- revealOnFocus: true \(or false\)
- cloakOnBlur: true \(or false\)
- customCloak : undefined \(or name of callback, as + +You can also define a custom cloak method callback: ```javascript - callback(value, $element, $cloakedElement) { - determine cloakedValue from value - $cloakedElement.val(cloakedValue); - $element.val(value); - } +function getFromServer(value, $element, $cloakedElement){ + var customMaskValue = $.ajax({ + //get mask + }); + $cloakedElement.val(cloakedValue); + $element.val(value); +} + +$('.yourpasswordinput').inputCloak({ + customCloak : getFromServer +}); ``` - \) -Head on over to [github](http://ermish.github.io/jquery-inputcloak) for examples. +### Need more examples? + +Head on over to [ermish.github.io/jquery-inputcloak](http://ermish.github.io/jquery-inputcloak). + + + + +## Available Settings + +| Setting | Options | Description | +| ------- | ----- | ----------- | +| type | 'ssn','credit' or 'all' | Default: 'ssn'. for display respectively like \*\*\*-\*\*-1234,\*1234 or \*\*\*\*, +| | | irrelevant if customCloak is used| +| symbol | any single-char e.g. '\*',\u2022 \(dot\), 'x'\ | Default: 0. Type of cloak symbol | +| delay | Integer | Default: 0. mSec delay between blur event and cloak-application | +| revealOnFocus | Boolean | Default: true. | +| cloakOnBlur | Boolean | Default: true | +| customCloak | Function | Default: undefined. Parameters are value, $element, $cloakedElement. This is called from cloakOnBlur. [example](##Examples) | ## Copyright and Licensing