Browse Source

Added formatting to existing README;

Ross Hadden 14 years ago
parent
commit
72d734da25
1 changed files with 70 additions and 44 deletions
  1. 70 44
      README.md

+ 70 - 44
README.md

@@ -5,7 +5,7 @@ The plugin is based on the maskedinput plugin of Josh Bush (http://digitalbush.c
 A definition can have a cardinality and have multiple prevalidators.
 A definition can have a cardinality and have multiple prevalidators.
 
 
 Example of some new definitions:
 Example of some new definitions:
-
+```javascript
                  'm': { //month
                  'm': { //month
                     validator: function(chrs, buffer) {
                     validator: function(chrs, buffer) {
                         var dayValue = buffer.join('').substr(0, 3);
                         var dayValue = buffer.join('').substr(0, 3);
@@ -41,7 +41,7 @@ Example of some new definitions:
                 }
                 }
             },
             },
             insertMode: false
             insertMode: false
-
+```
 These allow for a finer date validation then 99/99/9999 which also allows 33/33/3333 for example.  
 These allow for a finer date validation then 99/99/9999 which also allows 33/33/3333 for example.  
 In the jquery.inputmask.extentions.js you find a full date input validation which takes days, months & leap years into account.
 In the jquery.inputmask.extentions.js you find a full date input validation which takes days, months & leap years into account.
 
 
@@ -51,81 +51,92 @@ Also extra features like mask-repetitions (greedy and non-gready) and many other
 Usage:
 Usage:
 
 
 Include the js-files
 Include the js-files
-
+```html
 <script src="jquery.js" type="text/javascript"></script>
 <script src="jquery.js" type="text/javascript"></script>
 <script src="jquery.inputmask.js" type="text/javascript"></script>
 <script src="jquery.inputmask.js" type="text/javascript"></script>
 <script src="jquery.inputmask.extentions.js" type="text/javascript"></script>
 <script src="jquery.inputmask.extentions.js" type="text/javascript"></script>
+```
 
 
 Define your masks:
 Define your masks:
-
+```javascript
 $(document).ready(function(){
 $(document).ready(function(){
    $("#date").inputmask("d/m/y");  //direct mask
    $("#date").inputmask("d/m/y");  //direct mask
    $("#phone").inputmask("mask", {"mask": "(999) 999-9999"}); //specifying fn & options
    $("#phone").inputmask("mask", {"mask": "(999) 999-9999"}); //specifying fn & options
    $("#tin").inputmask({"mask": "99-9999999"}); //specifying options only
    $("#tin").inputmask({"mask": "99-9999999"}); //specifying options only
 });
 });
+```
 
 
-Extra options:
-
-change the placeholder
+## Extra options:
 
 
+### change the placeholder
+```javascript
 $(document).ready(function(){
 $(document).ready(function(){
    $("#date").inputmask("d/m/y",{ "placeholder": "*" });
    $("#date").inputmask("d/m/y",{ "placeholder": "*" });
 });
 });
+```
 
 
 or a multi-char placeholder
 or a multi-char placeholder
-
+```javascript
 $(document).ready(function(){
 $(document).ready(function(){
    $("#date").inputmask("d/m/y",{ "placeholder": "dd/mm/yyyy" });
    $("#date").inputmask("d/m/y",{ "placeholder": "dd/mm/yyyy" });
 });
 });
+```
 
 
-execute a function when the mask is completed, incomplete or cleared
-
+### execute a function when the mask is completed, incomplete or cleared
+```javascript
 $(document).ready(function(){
 $(document).ready(function(){
    $("#date").inputmask("d/m/y",{ "oncomplete": function(){ alert('inputmask complete'); } });
    $("#date").inputmask("d/m/y",{ "oncomplete": function(){ alert('inputmask complete'); } });
    $("#date").inputmask("d/m/y",{ "onincomplete": function(){ alert('inputmask incomplete'); } });
    $("#date").inputmask("d/m/y",{ "onincomplete": function(){ alert('inputmask incomplete'); } });
    $("#date").inputmask("d/m/y",{ "oncleared": function(){ alert('inputmask cleared'); } });
    $("#date").inputmask("d/m/y",{ "oncleared": function(){ alert('inputmask cleared'); } });
 });
 });
+```
 
 
-mask repeat function
-
+### mask repeat function
+```javascript
 $(document).ready(function(){
 $(document).ready(function(){
    $("#number").inputmask({ "mask": "9", "repeat": 10 });  // ~ mask "9999999999"
    $("#number").inputmask({ "mask": "9", "repeat": 10 });  // ~ mask "9999999999"
 });
 });
+```
 
 
-mask non-greedy repeat function
-
+### mask non-greedy repeat function
+```javascript
 $(document).ready(function(){
 $(document).ready(function(){
    $("#number").inputmask({ "mask": "9", "repeat": 10, "greedy": false });  // ~ mask "9" or mask "99" or ... mask "9999999999"
    $("#number").inputmask({ "mask": "9", "repeat": 10, "greedy": false });  // ~ mask "9" or mask "99" or ... mask "9999999999"
 });
 });
+```
 
 
-get the unmaskedvalue
-
+### get the unmaskedvalue
+```javascript
 $(document).ready(function(){
 $(document).ready(function(){
    $("#number").inputmask('unmaskedvalue');
    $("#number").inputmask('unmaskedvalue');
 });
 });
+```
 
 
-set a value and apply mask
-
+### set a value and apply mask
+```javascript
 $(document).ready(function(){
 $(document).ready(function(){
    $("#number").inputmask('setvalue', 12345); 
    $("#number").inputmask('setvalue', 12345); 
 });
 });
+```
 
 
 when the option patch_eval is set to true the same can be done with the traditionnal jquery.val function
 when the option patch_eval is set to true the same can be done with the traditionnal jquery.val function
-
+```javascript
 $(document).ready(function(){
 $(document).ready(function(){
    $("#number").val(12345); 
    $("#number").val(12345); 
 });
 });
+```
 
 
 with the autoUnmaskoption you can change the return of $.fn.val  to unmaskedvalue or the maskedvalue
 with the autoUnmaskoption you can change the return of $.fn.val  to unmaskedvalue or the maskedvalue
-
+```javascript
 $(document).ready(function(){
 $(document).ready(function(){
    	$('#<%= tbDate.ClientID%>').inputmask({ "mask": "d/m/y", 'autoUnmask' : true});	//  value: 23/03/1973
    	$('#<%= tbDate.ClientID%>').inputmask({ "mask": "d/m/y", 'autoUnmask' : true});	//  value: 23/03/1973
 
 
 	alert($('#<%= tbDate.ClientID%>').val());	// shows 23031973     (autoUnmask: true)
 	alert($('#<%= tbDate.ClientID%>').val());	// shows 23031973     (autoUnmask: true)
 });
 });
+```
 
 
-add custom definitions
-
+### add custom definitions
+```javascript
 $.extend($.inputmask.defaults.definitions, {
 $.extend($.inputmask.defaults.definitions, {
     'f': {
     'f': {
         "validator": "[0-9\(\)\.\+/ ]",
         "validator": "[0-9\(\)\.\+/ ]",
@@ -133,38 +144,44 @@ $.extend($.inputmask.defaults.definitions, {
         'prevalidator': null
         'prevalidator': null
     }
     }
 });
 });
+```
 
 
-set defaults
-
+### set defaults
+```javascript
 $.extend($.inputmask.defaults, {
 $.extend($.inputmask.defaults, {
     'autounmask': true
     'autounmask': true
 });
 });
+```
 
 
-numeric input direction
-
+### numeric input direction
+```javascript
 $(document).ready(function(){
 $(document).ready(function(){
     $('#test').inputmask('€ 999.999.999,99', { numericInput: true });    //   123456  =>  € ___.__1.234,56
     $('#test').inputmask('€ 999.999.999,99', { numericInput: true });    //   123456  =>  € ___.__1.234,56
 });
 });
+```
 
 
-remove the inputmask
-
+### remove the inputmask
+```javascript
 $(document).ready(function(){
 $(document).ready(function(){
     $('#test').inputmask('remove');
     $('#test').inputmask('remove');
 });
 });
+```
 
 
-escape special mask chars
-
+### escape special mask chars
+```javascript
 $(document).ready(function(){
 $(document).ready(function(){
     $("#months").inputmask("m \\months");
     $("#months").inputmask("m \\months");
 });
 });
+```
 
 
-## clearIncomplere - remove incomplete input on blur
-
+### clearIncomplete - remove incomplete input on blur
+```javascript
 $(document).ready(function(){
 $(document).ready(function(){
     $("#ssn").inputmask("999-99-9999",{placeholder:" ", clearIncomplete: true });
     $("#ssn").inputmask("999-99-9999",{placeholder:" ", clearIncomplete: true });
 });
 });
+```
 
 
-## Optional Masks
+### Optional Masks
 When `clearIncomplete: true` is set in the options, the mask will treat masks marked option as separate from those that are not optional.
 When `clearIncomplete: true` is set in the options, the mask will treat masks marked option as separate from those that are not optional.
 
 
 For example, given:
 For example, given:
@@ -177,16 +194,17 @@ While the field has focus and is blank, users will see the full mask `___-___`.
 When the required part of the mask is filled and the field loses focus, the user will see `123`.
 When the required part of the mask is filled and the field loses focus, the user will see `123`.
 When both the required and optional parts of the mask are filled out and the field loses focus, the user will see `123-abc`.
 When both the required and optional parts of the mask are filled out and the field loses focus, the user will see `123-abc`.
 
 
-oncleared option
-
+### oncleared option
+```javascript
 $(document).ready(function(){
 $(document).ready(function(){
     $("#ssn").inputmask("999-99-9999",{placeholder:" ", oncleared: function(){ alert('Set focus somewhere else ;-)');} });
     $("#ssn").inputmask("999-99-9999",{placeholder:" ", oncleared: function(){ alert('Set focus somewhere else ;-)');} });
 });
 });
+```
 
 
-aliases option
+### aliases option
 
 
 First you have to create an alias definition (more examples can be found in jquery.inputmask.extentions.js)
 First you have to create an alias definition (more examples can be found in jquery.inputmask.extentions.js)
-
+```javascript
 $.extend($.inputmask.defaults.aliases, {
 $.extend($.inputmask.defaults.aliases, {
         'date': {
         'date': {
             mask: "d/m/y"
             mask: "d/m/y"
@@ -195,40 +213,48 @@ $.extend($.inputmask.defaults.aliases, {
 	    alias: "date"
 	    alias: "date"
 	}
 	}
 });
 });
+```
 
 
-use;
+use:
+```javascript
 $(document).ready(function(){
 $(document).ready(function(){
    $("#date").inputmask("date");       => equals to    $("#date").inputmask("d/m/y");
    $("#date").inputmask("date");       => equals to    $("#date").inputmask("d/m/y");
 });
 });
+```
 
 
 or use the dd/mm/yyyy alias of the date alias:
 or use the dd/mm/yyyy alias of the date alias:
+```javascript
 $(document).ready(function(){
 $(document).ready(function(){
    $("#date").inputmask("dd/mm/yyyy");       => equals to    $("#date").inputmask("d/m/y");
    $("#date").inputmask("dd/mm/yyyy");       => equals to    $("#date").inputmask("d/m/y");
 });
 });
+```
 
 
-auto upper/lower- casing inputmask
+### auto upper/lower- casing inputmask
 
 
 see jquery.inputmask.extentions.js for an example how to define "auto"-casing in a definition (definition A)
 see jquery.inputmask.extentions.js for an example how to define "auto"-casing in a definition (definition A)
 casing can be null, "upper" or "lower"
 casing can be null, "upper" or "lower"
-
+```javascript
 $(document).ready(function(){
 $(document).ready(function(){
    $("#test").inputmask("999-AAA");       => 123abc ===> 123-ABC 
    $("#test").inputmask("999-AAA");       => 123abc ===> 123-ABC 
 });
 });
+```
 
 
-getemptymask command
+### getemptymask command
 
 
 return the default (empty) mask value
 return the default (empty) mask value
-
+```javascript
 $(document).ready(function(){
 $(document).ready(function(){
    $("#test").inputmask("999-AAA");    
    $("#test").inputmask("999-AAA");    
    alert($("#test").inputmask("getemptymask"));    => "___-___" 
    alert($("#test").inputmask("getemptymask"));    => "___-___" 
 });
 });
+```
 
 
-RTL input 
+### RTL input 
 
 
 Just add the dir="rtl" attribute to the input element
 Just add the dir="rtl" attribute to the input element
-
+```html
 <input id="test" dir="rtl" />
 <input id="test" dir="rtl" />
+```
 
 
 -----------------------------------------
 -----------------------------------------