diff --git a/front/core/components/textfield/textfield.js b/front/core/components/textfield/textfield.js index f166dae1c..ef5c6c788 100644 --- a/front/core/components/textfield/textfield.js +++ b/front/core/components/textfield/textfield.js @@ -5,9 +5,96 @@ export default class Textfield extends Field { constructor($element, $scope, $compile) { super($element, $scope, $compile); this.buildInput('text'); + + if (this.element.getAttribute('insertable')) { + this.element.addEventListener('click', e => { + let targetElement = e.target; + targetElement.addEventListener('keydown', e => { + let maxLength = this.maxLength; + + // In case the string is too long when the key is pressed, cut the string to the max length allowed + if (e.target.value.length > maxLength) + e.target.value.substring(0, maxLength); + }); + targetElement.addEventListener('keypress', async e => { + if (e.key == 'Enter') + return; // If the enter key is pressed dismiss it + + let maxLength = this.maxLength; + + // Call the function that obtains the current cursor position + let pointerPosition = getCaretPosition(e.target); + + // If the cursor position is on the last allowed character, + // prevent any keystroke from doing anything + if (pointerPosition >= maxLength) { + e.preventDefault(); + e.stopPropagation(); + return; + } + + // In case by any ways the input is longer than the max especified size, cut it to it. + let currentArrValue = e.target.value.slice(0, maxLength); + + // Transform said input to a array with each character on one position + currentArrValue = currentArrValue.split(''); + + // Cut the array in 2 parts, one with everything right of the caret, + // and one with everything left to it + let rightToTheCaret = currentArrValue.slice(pointerPosition); + + let leftToTheCaret = currentArrValue.slice(0, pointerPosition); + + // Remove the first number on the array that was right of the caret + rightToTheCaret.shift(); + + // The part that was left to the caret is not modified in any way and is put back into the textField + e.target.value = leftToTheCaret.join(''); + + // Add one millisecond of delay to give the UI time to update, + // so that it detects the changes on the textField + await new Promise(r => setTimeout(r, 1)); + + // Add the values that should be right to the Caret back in the textField + e.target.value = e.target.value + rightToTheCaret.join(''); + + // Update the current pointer position so that it moves 1 position to the right + pointerPosition++; + e.target.setSelectionRange(pointerPosition, pointerPosition); + + return false; + }); + }); + } } } +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('vnTextfield', { - controller: Textfield + controller: Textfield, + bindings: { + maxLength: ' - - +