Changed the logic

front/core/components/input-account/index.js

@@ -8,48 +8,104 @@ export default class inputAccount extends Field {
 
         this.element.addEventListener('click', e => {
             let targetElement = e.target;
-            let currentValue = targetElement.value;
-            let arrayValue = currentValue.split('');
-            let pointer = 0;
+            targetElement.addEventListener('keydown', e => {
+                if (e.target.value.length > 10) {
+                    console.log('demasiado largo');
+                    e.target.value.substring(0, 10);
+                    e.preventDefault();
+                }
+            });
             targetElement.addEventListener('keyup', e => {
-                this.$.$applyAsync(async() =>
-                    pointer = await insertFunction(e, targetElement, currentValue, arrayValue, pointer));
+                console.log('keyup');
+                console.log(e);
+            });
+            targetElement.addEventListener('keypress', e => {
+                if (e.key == 'Enter') {
+                    console.log('Enter pulsado');
+                    return;
+                }
+                console.log('|----------------------|');
+
+                e.stopPropagation();
+
+                console.log('Tecla pulsada --> ', e.which);
+                let pointerPosition = getCaretPosition(e.target);
+                console.log('Posicion del cursor --> ', pointerPosition);
+
+                if (pointerPosition >= 10) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    return;
+                }
+
+                let currentArrValue = e.target.value.slice(0, 10);
+
+                currentArrValue = currentArrValue.split('');
+
+                let rightToTheCaret = currentArrValue.slice(pointerPosition);
+
+                let leftToTheCaret = currentArrValue.slice(0, pointerPosition);
+
+                console.log('ValorCompleto --> ', currentArrValue);
+                console.log('Izquierda del puntero --> ', leftToTheCaret);
+                console.log('Derecha del puntero --> ', rightToTheCaret);
+
+                if (e.which < 48 || e.which > 57) {
+                    console.log('notNumerical');
+                    return;
+                }
+
+                let deletedNumber = rightToTheCaret.shift();
+
+                console.log('Cortamos el primer valor de la derecha --> ', deletedNumber);
+
+                console.log('Sustituida la primera posicion de la derecha del cursor --> ', rightToTheCaret);
+
+                let newValue = leftToTheCaret.concat(e.key, rightToTheCaret);
+
+                console.log('New Value --> ', leftToTheCaret, e.key, rightToTheCaret);
+
+                e.target.value = newValue.join('');
+                // .stopPropagation();
+                e.preventDefault();
+
+                pointerPosition++;
+
+                e.target.setSelectionRange(pointerPosition, pointerPosition);
+
+                let target = e.target;
+
+                target.keyup();
+
+                return false;
             });
         });
-
-        async function insertFunction(e, targetElement, currentValue, arrayValue, pointer) {
-            if (e.key == 'Backspace' || e.key == 'ArrowLeft') {
-                pointer != 0 ? pointer-- : pointer;
-                return pointer;
-            } else if (e.key == 'ArrowRight') {
-                pointer != 10 ? pointer++ : pointer = 0;
-                return pointer;
-            } else if (e.key == 'ArrowUp' || e.key == 'ArrowDown') {
-                blur();
-                return 0;
-            }
-
-            currentValue = targetElement.value;
-            arrayValue = currentValue.split('');
-
-            let keyToInsert = e.key;
-
-            if (keyToInsert.length > 1) return pointer;
-
-            arrayValue[pointer] = keyToInsert;
-
-            targetElement.value = arrayValue.join('');
-
-            if (pointer < 10) pointer++;
-
-            if (arrayValue.length > 10) {
-                arrayValue = arrayValue.slice(0, 10);
-                targetElement.value = arrayValue.join('');
-            }
-            return pointer;
-        }
     }
 }
+
+function getCaretPosition(targetElement) {
+    let caretPosition = 0;
+
+    // IE Support
+    if (document.selection) {
+        // Set focus on the element
+        targetElement.focus();
+
+        // To get cursor position, get empty selection range
+        let selectionOrCaretPos = document.selection.createRange();
+
+        // Move selection start to 0 position
+        selectionOrCaretPos.moveStart('character', -targetElement.value.length);
+
+        // The caret position is selection length
+        caretPosition = selectionOrCaretPos.text.length;
+    } else if (targetElement.selectionStart || targetElement.selectionStart == '0') // Firefox Support
+        caretPosition = targetElement.selectionStart;
+
+    // Return results
+    return (caretPosition);
+}
+
 ngModule.vnComponent('vnInputAccount', {
     controller: inputAccount
 });