salix/front/core/components/textfield/textfield.js

import ngModule from '../../module';
import Field from '../field';

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,
    bindings: {
        maxLength: '<?',
        insertable: '<?'
    }
});