입력박스에서 소문자 입력시 대문자로 변경하게 하기위한 방법으로
1. onKeyUp="field.value.toUpperCase()" 로 자바스크립트 처리
2. style="text-transform: uppercase" 로 스타일시트 처리
뭐..대충 두가지 외에 다른 수로 가지고 있는 방법이 있겠지만..
위 두가지 방법에는 한계가 있는데...
첫번째 방법은... 영문은 이상없이 잘 변경되나...
한글과 영문이 섞여있는 경우.. 한글을 입력하면 입력항목이 기존 입력내용이
지워져버리고 한글이 달랑 1자밖에 들어가지 않는 문제가 있다.
두번째 방법은..
보기에는 대문자로 잘~ 나타나지만...
Submit한경우.. 값을 받아보면 소문자이다.
위 두가지 방법외에 한가지를 더 소개하기전에 이벤트부터 설명하자면...
onKeyPress : 정확히 따지면 키가 눌러지고 난 이후 시점에 이벤트가 발생한다.
그래서 toUpperCase()를 사용하면 첫번째 키를 누를때에는소문자로 존재하고
두번째 키를 눌러야 이전 글자가 대문자로 변한다.
onKeyUp : 키가 눌러지고 다시 올라오는 시점에 이벤트가 발생한다.
보통 toUpperCase를 사용할 경우 이 이벤트에서 사용한다.
onKeyDown: 개념적으로는 키가 눌러질 때 이지만 현상을 onKeyPress와 마찬가지다.
이벤트 선택에 따라 event.keyCode값이 달라진다.
위와 같은 이벤트중 키가 눌러지는 그 시점에 해당해야 하므로
onKeyPress이번트를 사용하여 함수를 만들어 보면..
/***********************************************************************
* 설 명 :
* 사용예:
* onKeyPress 이벤트에 사용.
* onKeyPress 이벤트시 a: 97 z: 122
* onKeyUp 이벤트시 a: 65 z: 90
* onKeyDown 이벤트시 a: 65 z: 90
************************************************************************/
function KeyPressUpper(fld) {
if((event.keyCode >= 97) && (event.keyCode <= 122)) {
if(fld.value.length < fld.getAttribute("maxlength")) {
fld.value += String.fromCharCode(event.keyCode).toUpperCase();
}
event.returnValue = false;
}
}
위와 같이 구성할 수 있다.
단..여기서 또 주의해야 할 것은...maxlength가 주어져야 한다는 것이다.
글자 입력수를 제한해야할 경우에는 당연히 그러하겠지만.
[출처] http://fpdlrk.tistory.com/entry/%EC%86%8C%EB%AC%B8%EC%9E%90-%EC%9E%85%EB%A0%A5%EC%8B%9C-%EB%8C%80%EB%AC%B8%EC%9E%90%EB%A1%9C-%EB%B3%80%ED%99%98
