Created
August 11, 2017 15:08
-
-
Save mariovalney/88afdfe39a0cdd47ea69267273aea63d to your computer and use it in GitHub Desktop.
Plugin jQuery para criar máscaras para inputs
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function ($) { | |
| var AddMask = { | |
| masks: { | |
| phone: function(value) { | |
| var new_value = '', | |
| value = this.number(value); | |
| if (value.length <= 0) { | |
| new_value = ''; | |
| } else if (value.length < 3) { | |
| new_value = '(' + value.substr(0, 2); | |
| } else if (value.length >= 3 && value.length <= 6) { | |
| new_value = '(' + value.substr(0, 2) + ') ' + value.substr(2, 4); | |
| } else if (value.length >= 7 && value.length <= 10) { | |
| new_value = '(' + value.substr(0, 2) + ') ' + value.substr(2, 4) + '-' + value.substr(6, 4); | |
| } else if (value.length > 10) { | |
| new_value = '(' + value.substr(0, 2) + ') ' + value.substr(2, 5) + '-' + value.substr(7, 4); | |
| } | |
| return new_value; | |
| }, | |
| weight: function(value) { | |
| return this.number_with_dots(value) + ' Kg.'; | |
| }, | |
| money: function(value) { | |
| return 'R$ ' + this.number_with_decimal(value); | |
| }, | |
| number: function(value) { | |
| return value.replace(/[^0-9]/g, ''); | |
| }, | |
| number_with_dots: function(value) { | |
| var value = this.number(value); | |
| return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "."); | |
| }, | |
| number_with_decimal: function(value) { | |
| var new_value = '', | |
| value = this.number(value); | |
| if (value.length <= 0) { | |
| new_value = ''; | |
| } else if (value.length <= 2) { | |
| new_value = value; | |
| } else if (value.length > 2) { | |
| new_value = this.number_with_dots(value.substr(0, (value.length - 2))) + ',' + value.substr((value.length - 2), 2); | |
| } | |
| return new_value; | |
| } | |
| }, | |
| getCaret: function(el) { | |
| var start = 0, end = 0, normalizedValue, range, | |
| textInputRange, len, endRange; | |
| if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") { | |
| start = el.selectionStart; | |
| end = el.selectionEnd; | |
| } else { | |
| range = document.selection.createRange(); | |
| if (range && range.parentElement() == el) { | |
| len = el.value.length; | |
| normalizedValue = el.value.replace(/\r\n/g, "\n"); | |
| // Create a working TextRange that lives only in the input | |
| textInputRange = el.createTextRange(); | |
| textInputRange.moveToBookmark(range.getBookmark()); | |
| // Check if the start and end of the selection are at the very end | |
| // of the input, since moveStart/moveEnd doesn't return what we want | |
| // in those cases | |
| endRange = el.createTextRange(); | |
| endRange.collapse(false); | |
| if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) { | |
| start = end = len; | |
| } else { | |
| start = -textInputRange.moveStart("character", -len); | |
| start += normalizedValue.slice(0, start).split("\n").length - 1; | |
| if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) { | |
| end = len; | |
| } else { | |
| end = -textInputRange.moveEnd("character", -len); | |
| end += normalizedValue.slice(0, end).split("\n").length - 1; | |
| } | |
| } | |
| } | |
| } | |
| return { | |
| start: start, | |
| end: end | |
| }; | |
| }, | |
| moveCaret: function(input, distance) { | |
| if (input.setSelectionRange) { | |
| input.focus(); | |
| input.setSelectionRange(distance, distance); | |
| } else if(input.createTextRange) { | |
| var range = input.createTextRange(); | |
| range.collapse(true); | |
| range.moveEnd(distance); | |
| range.moveStart(distance); | |
| range.select(); | |
| } | |
| } | |
| }; | |
| $.fn.addMask = function (type) { | |
| this.filter('input').each(function () { | |
| if (typeof AddMask.masks[type] != 'function') { | |
| return; | |
| } | |
| $(this).on('input keyup trymask', function (event) { | |
| var value = $(this).val(), | |
| new_value = '', | |
| caret = AddMask.getCaret(this), | |
| distance = 0; | |
| if ((event.type == 'keyup' || event.type == 'input') && value == $(this).data('last-value')) { | |
| return; | |
| } | |
| new_value = AddMask.masks[type](value); | |
| $(this).val(new_value).data('last-value', new_value); | |
| if (typeof caret == 'object' && typeof caret.end == 'number' && event.type == 'keyup') { | |
| distance = value.length - caret.end; | |
| distance = new_value.length - distance; | |
| if (type == 'weight' && distance > (new_value.length - 4)) { | |
| distance = new_value.length - 4; | |
| } | |
| if (type == 'money' && distance <= 4) { | |
| distance = 4; | |
| } | |
| AddMask.moveCaret(this, distance); | |
| } | |
| }); | |
| $(this).on('change', function(event) { | |
| $(this).trigger('trymask'); | |
| }); | |
| }); | |
| return this; | |
| }; | |
| }(jQuery)); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment