Customizing Input Capitalize From Buffer Text-Form When Using Keyup Event

Sometime we need input value to form Capitalize when client type like for input client name, we can use regex and combine it with JS event key. But the thing is the key event only keyup we can use, it because when key have been lifted and the new value is formed. If we use other key event (keypress or keydown) the value shown are the old value. But by using keyup event it mean our browser need to wait what char has been type then form into capitalize, and there is some buffer time that is when we type a capital letter on word we want to create that should be lowercase it will show a Capital latter first then turn it into lowercase, this is the buffer what we talk about. What we want is to form without any buffer, so the only solution is only keypress or keydown when we form it.

The keypress is will fire after keydown so we chose keydown event.

1. Filter only alphabet and space are allowed using regex

2. Get position of cursor in a input box

3. If next or prevouse cursor position is a space char and we type a space char then abort it

4. Check is control key is still down or the input value is on block mode if it is then abort it

5. add a new char into text value and set the new value and form capitalize

6. dont forget if the control is up or what client type is not combination of key (shortcut key) then prevent from adding new value.
   

function ucwords(string, trim = true) {
    if (string == null) {
        return '';
    }
    let str = string;
    if (trim) {
        str.trim()
    }
    return str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
        return letter.toUpperCase();
    });
};

const inputName = document.getElementById("input-name");
let ctrl;
inputName.addEventListener("keyup", function(e) {
    if (e.key == "Control") {
        ctrl = "up";
    }
});

inputName.addEventListener('keydown', function(e) {
    let pattern = /^[^a-zA-Z\s]+$/;
    let ceretS = e.target.selectionStart;

    if (pattern.test(e.key) === true) {
        e.preventDefault();
        return false;
    }

    if (e.code == 'Space' && e.key == ' ' && (this.value.substring(ceretS, ceretS+1) == ' ' || this.value.substring(ceretS, ceretS-1) == ' ')) {
        e.preventDefault();
        return false;
    }

    if (e.key == 'Control' || ctrl == 'down' && e.code.indexOf('Key') >= 0) {
        ctrl = 'down';
        return false;
    }

    if (e.code.indexOf('Key') >= 0 || e.code == 'Space') {
        if (this.value.length > 0 && ceretS == 0 && e.target.selectionEnd == this.value.length) {
            return false;
        }
        this.value = ucwords(this.value.slice(0,ceretS) + e.key + this.value.slice(ceretS), false);
        e.target.selectionStart = ceretS+1;
        e.target.selectionEnd = ceretS+1;
        if (ctrl != 'down') {
            e.preventDefault();
            return false;
        }
    }
});