JQuery input에 대문자만 입력받는 방법
페이지 정보
작성자 서방님 댓글 0건 조회 515회 작성일 16-01-21 11:12본문
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> |
댓글목록
등록된 댓글이 없습니다.
