├── .gitignore ├── gulpfile.js ├── bower.json ├── package.json ├── LICENSE.md ├── dist ├── number-divider.min.js └── number-divider.js ├── README.md └── example.html /.gitignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | node_modules/ 3 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var uglify = require('gulp-uglify'); 3 | var rename = require('gulp-rename'); 4 | 5 | gulp.task('default', ['uglify']); 6 | 7 | gulp.task('uglify', function(){ 8 | gulp.src('dist/number-divider.js') 9 | .pipe(uglify()) 10 | .pipe(rename({suffix: '.min'})) 11 | .pipe(gulp.dest('dist/')); 12 | }); -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "number-divider", 3 | "homepage": "https://tyugaev.github.io/number-divider/", 4 | "authors": [ 5 | "Mikhail Tyugaev " 6 | ], 7 | "description": "jQuery number divider plugin", 8 | "main": "dist/number-divider.js", 9 | "keywords": [ 10 | "jquery-plugin", 11 | "separator", 12 | "delimiter", 13 | "divider", 14 | "number" 15 | ], 16 | "license": "MIT", 17 | "ignore": [ 18 | "**/.*", 19 | "node_modules", 20 | "gulpfile.js", 21 | "package.json", 22 | "example.html" 23 | ], 24 | "dependencies": { 25 | "jquery": ">= 1.7.1" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "number-divider", 3 | "version": "1.0.0", 4 | "description": "jQuery number divider plugin", 5 | "main": "dist/number-divider.js", 6 | "scripts": { 7 | "test": "example.html" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/tyugaev/jquery-number-divider.git" 12 | }, 13 | "keywords": [ 14 | "jquery-plugin", 15 | "separator", 16 | "delimiter", 17 | "divider", 18 | "number" 19 | ], 20 | "author": "Mikhail Tyugaev ", 21 | "license": "MIT", 22 | "bugs": { 23 | "url": "https://github.com/tyugaev/jquery-number-divider/issues" 24 | }, 25 | "homepage": "https://tyugaev.github.io/number-divider/", 26 | "dependencies": { 27 | "jquery": ">= 1.7.1" 28 | }, 29 | "devDependencies": { 30 | "gulp": "*", 31 | "gulp-uglify": "*", 32 | "gulp-rename": "*" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Mikhail Tyugaev 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /dist/number-divider.min.js: -------------------------------------------------------------------------------- 1 | !function(i){var e={delimiter:",",divideThousand:!0,delimiterRegExp:/[\.\,\s]/g},n=i.fn.val;i.fn.val=function(i){var e=this.data("divided");return"undefined"==typeof i?e?e.value:n.call(this):e?n.call(this,i).change():n.call(this,i)},i.fn.divide=function(n){function t(i){return!i.is("input, textarea")}function a(i){return!isNaN(i)}function d(i){if(i=i.replace(options.delimiterRegExp,""),!a(i)&&i.length>0)return console.warn(i+" is not a number"),-1;for(var e="",n=i.length;n>3;){if(4==i.length){e=(options.divideThousand?options.delimiter:"")+i.substring(1),n=1;break}n-=3,e=options.delimiter+i.substring(n,n+3)+e}return i.substring(0,n)+e}return options=i.extend({},e,n),this.each(function(){var e=i(this);!t(e)&&e.data("divided")&&e.unbind(".divide")}),this.each(function(){var e=i(this);if(t(e)){var n=d(e.text());return void(n!=-1&&e.text(n))}e.bind("input.divide change.divide",function(){var i=this.value.replace(options.delimiterRegExp,""),n=d(i),t=e.data("divided");if(n!=-1){if(!t){t={};var a=e.attr("name");void 0!=a?(e.attr("name",""),e.parent().append(""),t.name=a):t.name=null}t.value=i,this.value=n,e.data("divided",t),t.name&&e.parent().children("input[name="+t.name+"]").val(i)}}),e.change()}),this}}(jQuery); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Installation 2 | 1. Download the latest version from [GitHub](https://github.com/tyugaev/jquery-number-divider/releases/latest) or via Bower package manager:
3 | ``` 4 | bower install number-divider 5 | ``` 6 | 2. Include the JS file from the dist folder in the end of body section:
7 | ``` 8 | 9 | ``` 10 | 3. Set up type of all your separating inputs to 'text' 11 | 12 | Original number you can get simple using jQuery val(). Example: 13 | ```javascript 14 | $('#myinput').val(); 15 | ``` 16 | 17 | ## Code example 18 | 19 | You can use it with default parameters: 20 | ```javascript 21 | $('#input').divide(); 22 | ``` 23 | 24 | Or you can specify parameters: 25 | ```javascript 26 | $('#input').divide({ 27 | delimiter:' ', 28 | divideThousand:false 29 | }); 30 | ``` 31 | 32 | Also you can divide numbers in simple HTML tags 33 | ```html 34 |
1000
35 | 10000 36 | 37 | ``` 38 | 39 | And even mix them which is not surprising 40 | ``` 41 |
1000
42 | 43 | ``` 44 | In this case if you execute $('.divide').divide(); then all inputs was bind on change event, but others tags was processed once. 45 | 46 | If you wish use it in form then formatted values will be auto replaced on original values 47 | ```html 48 |
49 | 50 |

51 |

52 | 53 |
54 | ``` 55 | You do not need to do anything additional, plugin will automatically do it for you! 56 | 57 | ## Options 58 | Below is a complete list of options and matching default values: 59 | ``` 60 | { 61 | delimiter: ',', // current delimiter 62 | divideThousand: true, // 1,000..9,999 63 | delimiterRegExp: /[\.\,\s]/g // available delimiters 64 | } 65 | ``` 66 | 67 | ## License 68 | Copyright © Mikhail Tyugaev
69 | This project is licensed under the MIT License - see the [LICENSE](LICENSE.md) file for details 70 | -------------------------------------------------------------------------------- /example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Example 10 | 11 | 12 | 13 | 14 | 28 | 29 | 30 |

Introduction

31 |

32 | 33 | 34 | 39 |

40 |

Using in inputs

41 | 42 | 43 |

44 | 45 | 46 |


47 |

Using in HTML tags

48 |

49 |
1000
50 |

10000

51 |

52 |
53 |

Using in form

54 |

55 | 56 | 57 |

58 |

59 |
60 |
61 | 62 |

63 |

64 | 65 |
66 |
67 | 68 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /dist/number-divider.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery number divider 3 | * Copyright (C) 2016, Mikhail Tyugaev 4 | * Licensed under the MIT license 5 | * 6 | * @author Mikhail Tyugaev 7 | * @version 1.0.0 (2016-11-25) 8 | */ 9 | (function($) { 10 | 11 | var defaults = { 12 | delimiter: ',', 13 | divideThousand: true, // 1,000..9,999 14 | delimiterRegExp: /[\.\,\s]/g 15 | }; 16 | 17 | var originalVal = $.fn.val; 18 | 19 | // override for getting not formatted value 20 | $.fn.val = function(value) { 21 | var data = this.data('divided'); 22 | 23 | if (typeof value == 'undefined') { 24 | // getter 25 | if (!data) { 26 | // simple not formatted input 27 | return originalVal.call(this); 28 | } else { 29 | // get original(not formatted) value 30 | return data.value; 31 | } 32 | } else { 33 | // setter 34 | if (!data) { 35 | // simple not formatted input 36 | return originalVal.call(this, value); 37 | } else { 38 | // change() - for formatting 39 | return originalVal.call(this, value).change(); 40 | } 41 | } 42 | }; 43 | 44 | $.fn.divide = function(params){ 45 | /** 46 | * Checking is input element or simple tag 47 | */ 48 | function isNotInput(elem) { 49 | return !elem.is("input, textarea"); 50 | } 51 | /** 52 | * Checking is a number 53 | */ 54 | function isNumeric(num) { 55 | return !isNaN(num) 56 | } 57 | /** 58 | * Divide the number 59 | * @param text - string representation of the number 60 | * @returns {*} formatted string representation of the number or -1(if not number) 61 | */ 62 | function getDivided(text) { 63 | text = text.replace(options.delimiterRegExp, ''); 64 | 65 | if (!isNumeric(text) && text.length > 0) { 66 | console.warn(text + ' is not a number'); 67 | return -1; 68 | } 69 | 70 | var result = ''; 71 | var pos = text.length; 72 | 73 | while (pos > 3) { 74 | if (text.length == 4) { 75 | result = (options.divideThousand ? options.delimiter : '') + text.substring(1); 76 | pos = 1; 77 | break; 78 | } 79 | pos -= 3; 80 | result = options.delimiter + text.substring(pos, pos + 3) + result; 81 | } 82 | return text.substring(0, pos) + result; 83 | } 84 | // override default parameters 85 | options = $.extend({}, defaults, params); 86 | 87 | this.each(function() { 88 | 89 | var $this = $(this); 90 | // skip if not input or if is first binding 91 | if (isNotInput($this) || !$this.data('divided')) { 92 | return; 93 | } 94 | // unbinding if is not first times 95 | $this.unbind(".divide"); 96 | }); 97 | 98 | this.each(function() { 99 | 100 | var $this = $(this); 101 | 102 | // not binding simple HTML tags 103 | if (isNotInput($this)) { 104 | var result = getDivided($this.text()); 105 | 106 | // process once 107 | if (result != -1) { 108 | $this.text(result); 109 | } 110 | 111 | return; 112 | } 113 | 114 | $this.bind("input.divide change.divide", function() { 115 | var text = (this.value).replace(options.delimiterRegExp, ''); 116 | var result = getDivided(text); 117 | var data = $this.data('divided'); 118 | 119 | if (result == -1) { 120 | // value not number 121 | return; 122 | } 123 | 124 | if (!data) { 125 | data = {}; 126 | // set up data for correct interaction 127 | var name = $this.attr('name'); 128 | 129 | if (name != undefined) { 130 | // if input in form(have name) then adding hidden input 131 | $this.attr('name', ''); 132 | $this.parent().append(""); 133 | data.name = name; 134 | } else { 135 | data.name = null; 136 | } 137 | } 138 | 139 | data.value = text; // save original 140 | this.value = result; // write formatted 141 | $this.data('divided', data); // save setting 142 | 143 | // if input have name 144 | if (data.name) { 145 | $this.parent().children("input[name=" + data.name + "]").val(text); 146 | } 147 | }); 148 | 149 | $this.change(); // call formatting 150 | }); 151 | 152 | return this; 153 | }; 154 | 155 | })(jQuery); --------------------------------------------------------------------------------