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');
    }

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