현재노트

[jquery] input태그에 영문 대문자만 입력받는 가장쉬운방법! 본문

Front/jquery

[jquery] input태그에 영문 대문자만 입력받는 가장쉬운방법!

현재노트 2019. 8. 28. 10:59

안녕하세요,

 

이번 포스팅은 input 태그에 영문입력 시 대문자로 변환해주는 스크립트를 알아보겠습니다.

 

HTML 화면에서 Input에 대문자만 입력받아야 하는 경우가 있습니다

 

예들들면 쿠폰번호라든가 기타 다른 난수번호들을 입력받을때!

 

사용자가 소문자를 입력해도 자동으로 대문자로 바꿔주고 싶을때가 있습니다.

 

변경방법은 keyup이벤트를 이용해서 toUpperCase()를 이용하면 됩니다.

 

HTML

 <input type="text" id="txt" />

 

SCRIPT


위 코드대로 적용을하면 소문자로 입력되었따가 자동으로 대문자로 변경됩니다.

 

소문자로 변경되는 현상이 보기 안좋다고 생각이 드는분은 css로 작업이 가능합니다.

 

<input type="text" id="txt" style="text-transform: uppercase;"/>

 

style에 기능을 넣어줄 수 있지만, jquery에서 데이터를 찍어보면

대문자로 변경되어서 값이 저장되지는 않으니 필요에 맞게 사용하시면 되겠습니다.

 

감사합니다 :)

Comments