diff --git a/front/core/components/textfield/textfield.js b/front/core/components/textfield/textfield.js index f166dae1c..14567d255 100644 --- a/front/core/components/textfield/textfield.js +++ b/front/core/components/textfield/textfield.js @@ -6,8 +6,98 @@ export default class Textfield extends Field { super($element, $scope, $compile); this.buildInput('text'); } + + set maxLength(value) { + this.input.maxLength = value; + } + + get maxLength() { + return this.input.maxLength; + } + + set insertable(value) { + if (this._insertable === value) + return; + + if (this._insertable) + this.input.removeEventListener('keypress', this.keyPressListener); + + if (value) { + this.keyPressListener = async e => await this.onKeyPress(e); + this.input.addEventListener('keypress', this.keyPressListener); + } + + this._insertable = value; + } + + get insertable() { + return this._insertable; + } + + async onKeyPress(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; + + if (targetElement.selectionStart || targetElement.selectionStart == 0) // Firefox Support + caretPosition = targetElement.selectionStart; + + return caretPosition; } ngModule.vnComponent('vnTextfield', { - controller: Textfield + controller: Textfield, + bindings: { + maxLength: '