diff --git a/front/core/components/input-account/index.js b/front/core/components/input-account/index.js index 55ec689c1..f7343859d 100644 --- a/front/core/components/input-account/index.js +++ b/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 });