Keyup 이벤트를 사용할 때 버퍼 텍스트 양식에서 입력 대문자 사용자 지정

클라이언트 유형이 입력 클라이언트 이름과 같은 경우 대문자화를 형성하기 위해 입력 값이 필요할 때가 있습니다. 정규식을 사용하고 JS 이벤트 키와 결합할 수 있습니다. 그러나 중요한 것은 키가 해제되고 새로운 값이 형성될 때 우리가 사용할 수 있는 키 이벤트 전용 키업입니다. 다른 키 이벤트(keypress 또는 keydown)를 사용하는 경우 표시된 값은 이전 값입니다. 그러나 keyup 이벤트를 사용하면 브라우저에서 문자가 입력된 다음 대문자로 변환될 때까지 기다려야 한다는 것을 의미합니다. 만들고자 하는 단어에 대문자를 입력할 때 버퍼 시간이 있습니다. 소문자로 표시되어야 합니다. 대문자를 먼저 소문자로 바꾼 다음 이것이 우리가 말하는 버퍼입니다. 우리가 원하는 것은 버퍼 없이 형성하는 것이므로 형성할 때 유일한 해결책은 키 누르기 또는 키다운뿐입니다.

keypress는 keydown 이후에 실행되므로 keydown 이벤트를 선택했습니다.

정규식을 사용하여 알파벳과 공백만 필터링할 수 있습니다

.

입력 상자에서 커서 위치 가져오기

다음 또는 이전 커서 위치가 공백 문자이고 공백 문자를 입력하면 중단됩니다

.

제어 키가 여전히 눌러져 있거나 입력 값이 차단 모드인 경우 확인 후 중단합니다

.

새 문자를 텍스트 값에 추가하고 새 값을 설정한 다음 대문자로 만듭니다

.

컨트롤이 켜져 있거나 어떤 클라이언트 유형이 키(단축 키)의 조합이 아닌지 잊지 말고 새 값을 추가하지 않도록 하십시오.

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