Fix cursor position

To calculate the correct cursor position, mask characters before and after the cursor are counted separately.

Author: onuradsay

src/jquery.mask.js

@@ -100,6 +100,8 @@
                 .on('keydown.mask', function(e) {
                     el.data('mask-keycode', e.keyCode || e.which);
                     el.data('mask-previus-value', el.val());
+                    el.data('mask-previus-caret-pos', p.getCaret());
+                    p.maskDigitPosMapOld = p.maskDigitPosMap;
                 })
                 .on($.jMaskGlobals.useInput ? 'input.mask' : 'keyup.mask', p.behaviour)
                 .on('paste.mask drop.mask', function() {
@@ -186,26 +188,64 @@
 
                 return r;
             },
-            calculateCaretPosition: function(caretPos, newVal) {
-                var newValL = newVal.length,
-                    oValue  = el.data('mask-previus-value') || '',
-                    oValueL = oValue.length;
-
-                // edge cases when erasing digits
-                if (el.data('mask-keycode') === 8 && oValue !== newVal) {
-                    caretPos = caretPos - (newVal.slice(0, caretPos).length - oValue.slice(0, caretPos).length);
-
-                // edge cases when typing new digits
-                } else if (oValue !== newVal) {
-                    // if the cursor is at the end keep it there
-                    if (caretPos >= oValueL) {
-                        caretPos = newValL;
-                    } else {
-                        caretPos = caretPos + (newVal.slice(0, caretPos).length - oValue.slice(0, caretPos).length);
+            calculateCaretPosition: function(caretPosNew, newVal) {
+                var oldVal = el.data('mask-previus-value') || '';
+                if (oldVal !== newVal) {
+                    var caretPosOld = el.data('mask-previus-caret-pos') || 0,
+                        newValL = newVal.length,
+                        oldValL = oldVal.length,
+                        maskDigitsBeforeCaret = 0,
+                        maskDigitsAfterCaret = 0,
+                        maskDigitsBeforeCaretAll = 0,
+                        maskDigitsBeforeCaretAllOld = 0,
+                        i = 0;
+
+                    for (i = caretPosNew; i < newValL; i++) {
+                        if (!p.maskDigitPosMap[i]) {
+                            break;
+                        }
+                        maskDigitsAfterCaret++;
+                    }
+
+                    for (i = caretPosNew - 1; i >= 0; i--) {
+                        if (!p.maskDigitPosMap[i]) {
+                            break;
+                        }
+                        maskDigitsBeforeCaret++;
                     }
-                }
 
-                return caretPos;
+                    for (i = caretPosNew - 1; i >= 0; i--) {
+                        if (p.maskDigitPosMap[i]) {
+                            maskDigitsBeforeCaretAll++;
+                        }
+                    }
+
+                    for (i = caretPosOld - 1; i >= 0; i--) {
+                        if (p.maskDigitPosMapOld[i]) {
+                            maskDigitsBeforeCaretAllOld++;
+                        }
+                    }
+
+                    if (caretPosNew > oldValL) {
+                      // if the cursor is at the end keep it there
+                      caretPosNew = newValL;
+                    }
+                    else if (caretPosOld >= caretPosNew) {
+                        if (!p.maskDigitPosMapOld[caretPosNew])  {
+                          var caretPos = caretPosNew;
+                          caretPosNew -= maskDigitsBeforeCaretAllOld - maskDigitsBeforeCaretAll;
+                          caretPosNew -= maskDigitsBeforeCaret;
+                          if (p.maskDigitPosMap[caretPosNew])  {
+                            caretPosNew = caretPos;
+                          }
+                        }
+                    }
+                    else if (caretPosNew > caretPosOld) {
+                        caretPosNew += maskDigitsBeforeCaretAll - maskDigitsBeforeCaretAllOld;
+                        caretPosNew += maskDigitsAfterCaret;
+                    }
+                }
+                return caretPosNew;
             },
             behaviour: function(e) {
                 e = e || window.event;
@@ -233,6 +273,8 @@
                     v = 0, valLen = value.length,
                     offset = 1, addMethod = 'push',
                     resetPos = -1,
+                    maskDigitCount = 0,
+                    maskDigitPosArr = [],
                     lastMaskChar,
                     check;
 
@@ -277,6 +319,7 @@
                             // matched the last untranslated (raw) mask character that we encountered
                             // likely an insert offset the mask character from the last entry; fall
                             // through and only increment v
+                            maskDigitCount--;
                             lastUntranslatedMaskChar = undefined;
                         } else if (translation.optional) {
                             m += offset;
@@ -295,9 +338,12 @@
                         }
 
                         if (valDigit === maskDigit) {
+                            maskDigitPosArr.push(v);
                             v += offset;
                         } else {
                             lastUntranslatedMaskChar = maskDigit;
+                            maskDigitPosArr.push(v + maskDigitCount);
+                            maskDigitCount++;
                         }
 
                         m += offset;
@@ -309,7 +355,13 @@
                     buf.push(lastMaskCharDigit);
                 }
 
-                return buf.join('');
+                var newVal = buf.join('');
+                var maskDiff = options.reverse ? newVal.length - valLen : 0;
+                p.maskDigitPosMap = {};
+                for (var i = 0; i < maskDigitPosArr.length; i++) {
+                  p.maskDigitPosMap[maskDigitPosArr[i] + maskDiff] = 1;
+                }
+                return newVal;
             },
             callbacks: function (e) {
                 var val = p.val(),
@@ -538,4 +590,3 @@
         }
     }, globals.watchInterval);
 }, window.jQuery, window.Zepto));
-