浏览代码

add percentage alias

Robin Herbots 10 年之前
父节点
当前提交
f4fdc7ffec

+ 1 - 0
CHANGELOG.md

@@ -4,6 +4,7 @@ All notable changes to this project will be documented in this file.
 ## [Unreleased]
 
 ### Added
+- percentage alias
 - inputmask class
 - setting defaults / definitions / aliases
   - inputmask.extendDefaults

+ 5 - 134
README.md

@@ -891,142 +891,13 @@ Validate a given value against the mask.
 var isValid = inputmask.isValid("23/03/1973", { alias: "dd/mm/yyyy"});
 ```
 
-## .NET Nuget Package Install
-
-```html
-PM> Install-Package jQuery.InputMask
-```
-
-In App_Start, BundleConfig.cs
-
-```c#
-bundles.Add(new ScriptBundle("~/bundles/inputmask").Include(
-            "~/Scripts/jquery.inputmask/inputmask.js",
-            "~/Scripts/jquery.inputmask/jquery.inputmask.js",
-                        "~/Scripts/jquery.inputmask/inputmask.extensions.js",
-                        "~/Scripts/jquery.inputmask/inputmask.date.extensions.js",
-                        //and other extensions you want to include
-                        "~/Scripts/jquery.inputmask/inputmask.numeric.extensions.js"));
-```
-
-In Layout
-
-```html
-@Scripts.Render("~/bundles/inputmask")
-```
-
 # jquery.inputmask extensions
-# =========== TODO ===========
-## date & datetime extensions
-
-```javascript
-$(document).ready(function(){
-   $(selector).inputmask("dd/mm/yyyy");
-   $(selector).inputmask("mm/dd/yyyy");
-   $(selector).inputmask("date"); // alias for dd/mm/yyyy
-   $(selector).inputmask("date", {yearrange: { minyear: 1900, maxyear: 2099 }}); //specify year range
-});
-```
-
-The date aliases take leap years into account.  There is also autocompletion on day, month, year. For example:
-
-input:    2/2/2012         result: 02/02/2012<br>input:  352012            result: 03/05/2012<br>input:  3/530            result: 03/05/2030<br>input:  ctrl rightarrow            result: the date from today  
-
-```javascript
-$(document).ready(function(){
-   $(selector).inputmask("datetime"); // 24h
-   $(selector).inputmask("datetime12"); // am/pm
-});
-```
-
-### jqueryui.datepicker example
-
-```javascript
-    $('#calender').datepicker({
-                dateFormat: 'dd/mm/yy',
-                changeMonth: true,
-                changeYear: true
-    }).inputmask('dd/mm/yyyy');
-```
-
-## numeric extensions
-
-```javascript
-$(document).ready(function(){
-   $(selector).inputmask("decimal");
-   $(selector).inputmask("decimal", { allowMinus: false });
-   $(selector).inputmask("integer");
-});
-```
-
-Define the radixpoint
-
-```javascript
-$(document).ready(function(){
-   $(selector).inputmask("decimal", { radixPoint: "," });
-});
-```
-
-Define the number of digits after the radixpoint
-
-```javascript
-$(document).ready(function(){
-   $(selector).inputmask("decimal", { digits: 3 });
-});
-```
-
-When TAB out of the input the digits autocomplate with 0 if the digits option is given a valid number.
-
-Grouping support through:  autoGroup, groupSeparator, groupSize
-
-```javascript
-$(document).ready(function(){
-   $(selector).inputmask("decimal", { radixPoint: ",", autoGroup: true, groupSeparator: ".", groupSize: 3 });
-});
-```
-
-Allow minus and/or plus symbol
-
-```javascript
-$(document).ready(function(){
-   $(selector).inputmask("decimal", { allowMinus: false });
-   $(selector).inputmask("integer", { allowMinus: false, allowPlus: true });
-});
-```
-
-## regex extensions
-With the regex extension you can use any regular expression as a mask.  Currently this does only input restriction.<br>There is no further masking visualization.
-
-Example simple email regex:
-
-```javascript
-$(document).ready(function(){
-   $(selector).inputmask('Regex', { regex: "[a-zA-Z0-9._%-]+@[a-zA-Z0-9-]+\\.[a-zA-Z]{2,4}" });
-});
-```
-
-## phone extensions
-Uses the phone mask definitions from [https://github.com/andr-04/inputmask-multi](https://github.com/andr-04/inputmask-multi)
-
-```javascript
- $(selector).inputmask("phone", {
-                url: "Scripts/jquery.inputmask/phone-codes/phone-codes.json",
-                onKeyValidation: function () { //show some metadata in the console
-                    console.log($(this).inputmask("getmetadata")["name_en"]);
-                }
-  });
-```
-
-## other extensions
-An ip address alias for entering valid ip-addresses.
-
-```javascript
-$(document).ready(function(){
-   $(selector).inputmask("ip");
-});
-```
 
-You can find/modify/extend this alias in the jquery.inputmask.extensions.js
+###[date & datetime extensions](README_date.md)
+###[numeric extensions](README_numeric.md)
+###[regex extensions](README_regex.md)
+###[phone extensions](README_phone.md)
+###[other extensions](README_other.md)
 
 [npm-url]: https://npmjs.org/package/jquery.inputmask
 [npm-image]: https://img.shields.io/npm/v/jquery.inputmask.svg

+ 31 - 0
README_date.md

@@ -0,0 +1,31 @@
+## date & datetime extensions
+
+```javascript
+$(document).ready(function(){
+   $(selector).inputmask("dd/mm/yyyy");
+   $(selector).inputmask("mm/dd/yyyy");
+   $(selector).inputmask("date"); // alias for dd/mm/yyyy
+   $(selector).inputmask("date", {yearrange: { minyear: 1900, maxyear: 2099 }}); //specify year range
+});
+```
+
+The date aliases take leap years into account.  There is also autocompletion on day, month, year. For example:
+
+input:    2/2/2012         result: 02/02/2012<br>input:  352012            result: 03/05/2012<br>input:  3/530            result: 03/05/2030<br>input:  ctrl rightarrow            result: the date from today  
+
+```javascript
+$(document).ready(function(){
+   $(selector).inputmask("datetime"); // 24h
+   $(selector).inputmask("datetime12"); // am/pm
+});
+```
+
+### jqueryui.datepicker example
+
+```javascript
+    $('#calender').datepicker({
+                dateFormat: 'dd/mm/yy',
+                changeMonth: true,
+                changeYear: true
+    }).inputmask('dd/mm/yyyy');
+```

+ 44 - 0
README_numeric.md

@@ -0,0 +1,44 @@
+## numeric extensions
+
+```javascript
+$(document).ready(function(){
+   $(selector).inputmask("decimal");
+   $(selector).inputmask("decimal", { allowMinus: false });
+   $(selector).inputmask("integer");
+});
+```
+
+Define the radixpoint
+
+```javascript
+$(document).ready(function(){
+   $(selector).inputmask("decimal", { radixPoint: "," });
+});
+```
+
+Define the number of digits after the radixpoint
+
+```javascript
+$(document).ready(function(){
+   $(selector).inputmask("decimal", { digits: 3 });
+});
+```
+
+When TAB out of the input the digits autocomplate with 0 if the digits option is given a valid number.
+
+Grouping support through:  autoGroup, groupSeparator, groupSize
+
+```javascript
+$(document).ready(function(){
+   $(selector).inputmask("decimal", { radixPoint: ",", autoGroup: true, groupSeparator: ".", groupSize: 3 });
+});
+```
+
+Allow minus and/or plus symbol
+
+```javascript
+$(document).ready(function(){
+   $(selector).inputmask("decimal", { allowMinus: false });
+   $(selector).inputmask("integer", { allowMinus: false, allowPlus: true });
+});
+```

+ 10 - 0
README_other.md

@@ -0,0 +1,10 @@
+## other extensions
+An ip address alias for entering valid ip-addresses.
+
+```javascript
+$(document).ready(function(){
+   $(selector).inputmask("ip");
+});
+```
+
+You can find/modify/extend this alias in the jquery.inputmask.extensions.js

+ 11 - 0
README_phone.md

@@ -0,0 +1,11 @@
+## phone extensions
+Uses the phone mask definitions from [https://github.com/andr-04/inputmask-multi](https://github.com/andr-04/inputmask-multi)
+
+```javascript
+ $(selector).inputmask("phone", {
+                url: "Scripts/jquery.inputmask/phone-codes/phone-codes.json",
+                onKeyValidation: function () { //show some metadata in the console
+                    console.log($(this).inputmask("getmetadata")["name_en"]);
+                }
+  });
+```

+ 10 - 0
README_regex.md

@@ -0,0 +1,10 @@
+## regex extensions
+With the regex extension you can use any regular expression as a mask.  Currently this does only input restriction.<br>There is no further masking visualization.
+
+Example simple email regex:
+
+```javascript
+$(document).ready(function(){
+   $(selector).inputmask('Regex', { regex: "[a-zA-Z0-9._%-]+@[a-zA-Z0-9-]+\\.[a-zA-Z]{2,4}" });
+});
+```

+ 1 - 1
bower.json

@@ -1,6 +1,6 @@
 {
   "name": "jquery.inputmask",
-  "version": "3.1.64-60",
+  "version": "3.1.64-61",
   "main": [
     "./dist/inputmask/jquery.inputmask.js",
     "./dist/inputmask/jquery.inputmask.extensions.js",

+ 1 - 1
component.json

@@ -2,7 +2,7 @@
     "name": "jquery_inputmask",
     "repository": "robinherbots/jquery.inputmask",
     "description": "jquery.inputmask is a jquery plugin which create an input mask.",
-    "version": "3.1.64-60",
+    "version": "3.1.64-61",
     "keywords": [ "jquery", "plugins", "input", "form", "inputmask", "mask" ],
     "main": "./dist/jquery.inputmask.bundle.js",
     "scripts": [

+ 1 - 1
composer.json

@@ -1,7 +1,7 @@
 {
     "name": "robinherbots/jquery.inputmask",
     "description": "jquery.inputmask is a jquery plugin which create an input mask.",
-	"version": "3.1.64-60",
+	"version": "3.1.64-61",
     "type": "library",
     "keywords": ["jquery", "plugins", "input", "form", "inputmask", "mask"],
     "homepage": "http://robinherbots.github.io/jquery.inputmask",

+ 1 - 1
dist/inputmask/inputmask.date.extensions.js

@@ -3,7 +3,7 @@
 * http://github.com/RobinHerbots/jquery.inputmask
 * Copyright (c) 2010 - 2015 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 3.1.64-60
+* Version: 3.1.64-61
 */
 !function(factory) {
     "function" == typeof define && define.amd ? define([ "jquery", "./inputmask" ], factory) : "object" == typeof exports ? module.exports = factory(require("jquery"), require("./inputmask")) : factory(jQuery);

文件差异内容过多而无法显示
+ 1 - 1
dist/inputmask/inputmask.date.extensions.min.js


+ 1 - 1
dist/inputmask/inputmask.extensions.js

@@ -3,7 +3,7 @@
 * http://github.com/RobinHerbots/jquery.inputmask
 * Copyright (c) 2010 - 2015 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 3.1.64-60
+* Version: 3.1.64-61
 */
 !function(factory) {
     "function" == typeof define && define.amd ? define([ "jquery", "./inputmask" ], factory) : "object" == typeof exports ? module.exports = factory(require("jquery"), require("./inputmask")) : factory(jQuery);

文件差异内容过多而无法显示
+ 1 - 1
dist/inputmask/inputmask.extensions.min.js


+ 1 - 1
dist/inputmask/inputmask.js

@@ -3,7 +3,7 @@
 * http://github.com/RobinHerbots/jquery.inputmask
 * Copyright (c) 2010 - 2015 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 3.1.64-60
+* Version: 3.1.64-61
 */
 !function(factory) {
     "function" == typeof define && define.amd ? define([ "jquery" ], factory) : "object" == typeof exports ? module.exports = factory(require("jquery")) : factory(jQuery);

文件差异内容过多而无法显示
+ 1 - 1
dist/inputmask/inputmask.min.js


+ 29 - 5
dist/inputmask/inputmask.numeric.extensions.js

@@ -3,7 +3,7 @@
 * http://github.com/RobinHerbots/jquery.inputmask
 * Copyright (c) 2010 - 2015 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 3.1.64-60
+* Version: 3.1.64-61
 */
 !function(factory) {
     "function" == typeof define && define.amd ? define([ "jquery", "./inputmask" ], factory) : "object" == typeof exports ? module.exports = factory(require("jquery"), require("./inputmask")) : factory(jQuery);
@@ -52,6 +52,10 @@
             decimalProtect: !0,
             min: void 0,
             max: void 0,
+            step: 1,
+            insertMode: !0,
+            autoUnmask: !1,
+            unmaskAsNumber: !1,
             postFormat: function(buffer, pos, reformatOnly, opts) {
                 var suffixStripped = !1;
                 buffer.length >= opts.suffix.length && buffer.join("").indexOf(opts.suffix) == buffer.length - opts.suffix.length && (buffer.length = buffer.length - opts.suffix.length, 
@@ -286,9 +290,6 @@
                     }
                 }
             },
-            insertMode: !0,
-            autoUnmask: !1,
-            unmaskAsNumber: !1,
             onUnMask: function(maskedValue, unmaskedValue, opts) {
                 var processValue = maskedValue.replace(opts.prefix, "");
                 return processValue = processValue.replace(opts.suffix, ""), processValue = processValue.replace(new RegExp(inputmask.escapeRegex(opts.groupSeparator), "g"), ""), 
@@ -334,6 +335,17 @@
                     }
                 }
                 return canClear;
+            },
+            onKeyDown: function(e, buffer, caretPos, opts) {
+                var $input = $(this);
+                if (e.ctrlKey) switch (e.keyCode) {
+                  case inputmask.keyCode.UP:
+                    $input.val(parseInt(this.inputmask.unmaskedvalue()) + parseInt(opts.step)), $input.triggerHandler("setvalue.inputmask");
+                    break;
+
+                  case inputmask.keyCode.DOWN:
+                    $input.val(parseInt(this.inputmask.unmaskedvalue()) - parseInt(opts.step)), $input.triggerHandler("setvalue.inputmask");
+                }
             }
         },
         currency: {
@@ -351,8 +363,20 @@
         },
         integer: {
             alias: "numeric",
-            digits: "0",
+            digits: 0,
             radixPoint: ""
+        },
+        percentage: {
+            alias: "numeric",
+            digits: 2,
+            radixPoint: ".",
+            placeholder: "0",
+            autoGroup: !1,
+            min: 0,
+            max: 100,
+            suffix: " %",
+            allowPlus: !1,
+            allowMinus: !1
         }
     }), inputmask;
 });

文件差异内容过多而无法显示
+ 2 - 2
dist/inputmask/inputmask.numeric.extensions.min.js


+ 1 - 1
dist/inputmask/inputmask.phone.extensions.js

@@ -3,7 +3,7 @@
 * http://github.com/RobinHerbots/jquery.inputmask
 * Copyright (c) 2010 - 2015 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 3.1.64-60
+* Version: 3.1.64-61
 */
 !function(factory) {
     "function" == typeof define && define.amd ? define([ "jquery", "./inputmask" ], factory) : "object" == typeof exports ? module.exports = factory(require("jquery"), require("./inputmask")) : factory(jQuery);

文件差异内容过多而无法显示
+ 1 - 1
dist/inputmask/inputmask.phone.extensions.min.js


+ 1 - 1
dist/inputmask/inputmask.regex.extensions.js

@@ -3,7 +3,7 @@
 * http://github.com/RobinHerbots/jquery.inputmask
 * Copyright (c) 2010 - 2015 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 3.1.64-60
+* Version: 3.1.64-61
 */
 !function(factory) {
     "function" == typeof define && define.amd ? define([ "jquery", "./inputmask" ], factory) : "object" == typeof exports ? module.exports = factory(require("jquery"), require("./inputmask")) : factory(jQuery);

文件差异内容过多而无法显示
+ 1 - 1
dist/inputmask/inputmask.regex.extensions.min.js


+ 1 - 1
dist/inputmask/jquery.inputmask.js

@@ -3,7 +3,7 @@
 * http://github.com/RobinHerbots/jquery.inputmask
 * Copyright (c) 2010 - 2015 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 3.1.64-60
+* Version: 3.1.64-61
 */
 !function(factory) {
     "function" == typeof define && define.amd ? define([ "jquery", "./inputmask" ], factory) : "object" == typeof exports ? module.exports = factory(require("jquery"), require("./inputmask")) : factory(jQuery);

文件差异内容过多而无法显示
+ 1 - 1
dist/inputmask/jquery.inputmask.min.js


+ 29 - 5
dist/jquery.inputmask.bundle.js

@@ -3,7 +3,7 @@
 * http://github.com/RobinHerbots/jquery.inputmask
 * Copyright (c) 2010 - 2015 Robin Herbots
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
-* Version: 3.1.64-60
+* Version: 3.1.64-61
 */
 !function($) {
     function inputmask(options) {
@@ -1992,6 +1992,10 @@
             decimalProtect: !0,
             min: void 0,
             max: void 0,
+            step: 1,
+            insertMode: !0,
+            autoUnmask: !1,
+            unmaskAsNumber: !1,
             postFormat: function(buffer, pos, reformatOnly, opts) {
                 var suffixStripped = !1;
                 buffer.length >= opts.suffix.length && buffer.join("").indexOf(opts.suffix) == buffer.length - opts.suffix.length && (buffer.length = buffer.length - opts.suffix.length, 
@@ -2226,9 +2230,6 @@
                     }
                 }
             },
-            insertMode: !0,
-            autoUnmask: !1,
-            unmaskAsNumber: !1,
             onUnMask: function(maskedValue, unmaskedValue, opts) {
                 var processValue = maskedValue.replace(opts.prefix, "");
                 return processValue = processValue.replace(opts.suffix, ""), processValue = processValue.replace(new RegExp(inputmask.escapeRegex(opts.groupSeparator), "g"), ""), 
@@ -2274,6 +2275,17 @@
                     }
                 }
                 return canClear;
+            },
+            onKeyDown: function(e, buffer, caretPos, opts) {
+                var $input = $(this);
+                if (e.ctrlKey) switch (e.keyCode) {
+                  case inputmask.keyCode.UP:
+                    $input.val(parseInt(this.inputmask.unmaskedvalue()) + parseInt(opts.step)), $input.triggerHandler("setvalue.inputmask");
+                    break;
+
+                  case inputmask.keyCode.DOWN:
+                    $input.val(parseInt(this.inputmask.unmaskedvalue()) - parseInt(opts.step)), $input.triggerHandler("setvalue.inputmask");
+                }
             }
         },
         currency: {
@@ -2291,8 +2303,20 @@
         },
         integer: {
             alias: "numeric",
-            digits: "0",
+            digits: 0,
             radixPoint: ""
+        },
+        percentage: {
+            alias: "numeric",
+            digits: 2,
+            radixPoint: ".",
+            placeholder: "0",
+            autoGroup: !1,
+            min: 0,
+            max: 100,
+            suffix: " %",
+            allowPlus: !1,
+            allowMinus: !1
         }
     }), inputmask;
 }(jQuery), function($) {

文件差异内容过多而无法显示
+ 3 - 3
dist/jquery.inputmask.bundle.min.js


+ 33 - 5
js/inputmask.numeric.extensions.js

@@ -88,6 +88,10 @@ Optional extensions on the jquery.inputmask base
       decimalProtect: true, //do not allow assumption of decimals input without entering the radixpoint
       min: undefined, //minimum value
       max: undefined, //maximum value
+      step: 1,
+      insertMode: true,
+      autoUnmask: false,
+      unmaskAsNumber: false,
       postFormat: function(buffer, pos, reformatOnly, opts) { //this needs to be removed // this is crap
         //console.log("input " + buffer);
         var negationStrip = false;
@@ -467,9 +471,6 @@ Optional extensions on the jquery.inputmask base
           }
         }
       },
-      insertMode: true,
-      autoUnmask: false,
-      unmaskAsNumber: false,
       onUnMask: function(maskedValue, unmaskedValue, opts) {
         var processValue = maskedValue.replace(opts.prefix, "");
         processValue = processValue.replace(opts.suffix, "");
@@ -569,7 +570,22 @@ Optional extensions on the jquery.inputmask base
         }
 
         return canClear;
-      }
+      },
+      onKeyDown: function(e, buffer, caretPos, opts) {
+        var $input = $(this);
+        if (e.ctrlKey) {
+          switch (e.keyCode) {
+            case inputmask.keyCode.UP:
+              $input.val(parseInt(this.inputmask.unmaskedvalue()) + parseInt(opts.step));
+              $input.triggerHandler('setvalue.inputmask');
+              break;
+            case inputmask.keyCode.DOWN:
+              $input.val(parseInt(this.inputmask.unmaskedvalue()) - parseInt(opts.step));
+              $input.triggerHandler('setvalue.inputmask');
+              break;
+          }
+        }
+      },
     },
     'currency': {
       prefix: "$ ",
@@ -586,8 +602,20 @@ Optional extensions on the jquery.inputmask base
     },
     'integer': {
       alias: "numeric",
-      digits: "0",
+      digits: 0,
       radixPoint: ""
+    },
+    'percentage': {
+      alias: "numeric",
+      digits: 2,
+      radixPoint: ".",
+      placeholder: "0",
+      autoGroup: false,
+      min: 0,
+      max: 100,
+      suffix: " %",
+      allowPlus: false,
+      allowMinus: false
     }
   });
   return inputmask;

+ 23 - 0
nuspecs/Readme.txt

@@ -0,0 +1,23 @@
+## .NET Nuget Package Install
+
+```html
+PM> Install-Package jQuery.InputMask
+```
+
+In App_Start, BundleConfig.cs
+
+```c#
+bundles.Add(new ScriptBundle("~/bundles/inputmask").Include(
+            "~/Scripts/jquery.inputmask/inputmask.js",
+            "~/Scripts/jquery.inputmask/jquery.inputmask.js",
+                        "~/Scripts/jquery.inputmask/inputmask.extensions.js",
+                        "~/Scripts/jquery.inputmask/inputmask.date.extensions.js",
+                        //and other extensions you want to include
+                        "~/Scripts/jquery.inputmask/inputmask.numeric.extensions.js"));
+```
+
+In Layout
+
+```html
+@Scripts.Render("~/bundles/inputmask")
+```

+ 1 - 0
nuspecs/jquery.inputmask.linux.nuspec

@@ -39,5 +39,6 @@
       target="content/Scripts/jquery.inputmask/jquery.inputmask.js"/>
     <file src="dist/inputmask/inputmask.js"
       target="content/Scripts/jquery.inputmask/inputmask.js"/>
+    <file src="../nuspecs/Readme.txt" target="Readme.txt" />
   </files>
 </package>

+ 1 - 0
nuspecs/jquery.inputmask.nuspec

@@ -39,5 +39,6 @@
       target="content\Scripts\jquery.inputmask\jquery.inputmask.js"/>
     <file src="..\dist\inputmask\inputmask.js"
       target="content\Scripts\jquery.inputmask\inputmask.js"/>
+    <file src="..\nuspecs\Readme.txt" target="Readme.txt" />
   </files>
 </package>

+ 1 - 1
package.json

@@ -1,6 +1,6 @@
 {
   "name": "jquery.inputmask",
-  "version": "3.1.64-60",
+  "version": "3.1.64-61",
   "description": "jquery.inputmask is a jquery plugin which create an input mask.",
   "main": "./dist/inputmask/jquery.inputmask.js",
   "files": [