JQuery input에 대문자만 입력받는 방법 > jquery

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

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

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

이럴때 어떻게 구현하느냐~

방법은 두가지 정도 있습니다.

첫번재 방법은 keyup이벤트를 이용해서

input의 값을 대문자로 해주는 거죠.

toUpperCase()를 이용하면 되죠~

JQuery로 어떻게 하냐하면...

HTML

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

Script

$("#txt").bind("keyup", function() { $( this ).val($( this ).val().toUpperCase()); });

따란~

간단하죠?

하지만 여기에 단점이 하나 있습니다.

소문자로 입력하게 되면

소문자가 잠깐 보였다가 대문자로 변경된다는 점입니다.

두번째 방법은

css의 도움을 받는것입니다.

Style에 text-transform: uppercase를 이용하는 것이죠.

HTML

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

요렇게 style에 정의하면 소문자를 입력해도 바로 대문자로 보입니다.

하지만!!!!!

$("#txt").val() 해보면 사용자가 입력한 그대로의 값이 보입니다.

 

그쵸?

그래서 서버로 값을 전송하기 전에 해당 값을

$("#txt").val($("#txt").val().toUpperCase)); 해줘야 합니다.

아니면 위에 있는 함수를 그대로 사용해도 되고요.

최종버젼~!

HTML

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

Script

<script type="text/javascript"> $(document).ready(function() {     $("#txt").bind("keyup", function() {     $( this ).val($( this ).val().toUpperCase());     });  }); </script>