input 태그에서 알파벳, 숫자, 언더바만 입력 받기

keypress 이벤트로 처리를 하면 한글로 바꾼후 타이핑하면 의미가 없게 된다.

input 이벤트에서 처리를 해야 IME 입력도 대처할 수 있다.

 

1. input 태그에 아래와 같이 이벤트를 건다.

<input type="text" oninput="onlyAlphaNum(this)" />

 

2. onlyAlphaNum 함수를 아래와 같이 작성한다.

function onlyAlphaNum(input) {
    const regex = /^[A-Za-z0-9_]*$/; // 영문, 숫자, 언더바만 허용하는 정규 표현식
    if (!regex.test(input.value)) {
        // 입력된 값이 정규 표현식과 맞지 않으면 값을 수정
        input.value = input.value.replace(/[^A-Za-z0-9_]/g, '');
    }
}

 

위와 같이 하면 입력언어를 바꿔도 영문, 숫자, 언더바만 입력받는것이 동작하게 된다.