[자바스크립트] 키입력으로 텍스트박스의 이동

키 입력으로 텍스트 박스를 이동시킬때 쓰는 스크립트

주민등록번호나 전화번호등의 길이가 정해진 텍스트박스에 사용하면 좋을듯.

예제)

주민등록번호 -

사용스크립트)

    <script type="text/javascript">

        // 숫자만 입력가능

        function fn_onlyNum(frm, value) {

            if (

        (event.keyCode >= 48 && event.keyCode <= 57) ||

        (event.keyCode >= 96 && event.keyCode <= 105) ||

        (event.keyCode >= 37 && event.keyCode <= 40) ||

        event.keyCode == 9 ||

        event.keyCode == 8 ||

        event.keyCode == 46 || event.keyCode == 109 || event.keyCode == 189

        ) {

                //48-57(0-9)

                //96-105(키패드0-9)

                //8 : backspace

                //46 : delete key

                //9 :tab

                //37-40 : left, up, right, down

                //109,189 : -

                event.returnValue = true;

            }

            else {

                //alert('숫자만 입력 가능합니다.');

                //frm.value = "";

                event.returnValue = false;

            }

        }

   

        // 숫자와 엔터키만 입력가능

        function fn_onlyNumOrEnter(frm, value) {

            if (

        (event.keyCode >= 48 && event.keyCode <= 57) ||

        (event.keyCode >= 96 && event.keyCode <= 105) ||

        (event.keyCode >= 37 && event.keyCode <= 40) ||

        event.keyCode == 9 ||

        event.keyCode == 8 ||

        event.keyCode == 46 ||

        event.keyCode == 13

        ) {

                //48-57(0-9)

                //96-105(키패드0-9)

                //8 : backspace

                //46 : delete key

                //9 :tab

                //37-40 : left, up, right, down

                event.returnValue = true;

            }

            else {

                //alert('숫자만 입력 가능합니다.');

                //frm.value = "";

                event.returnValue = false;

            }

        }

        // 텍스트 박스 다음 포커스 이동

        function fn_NextFocus(obj_id, targetobj_id, obj_maxlength) {

            if (event.keyCode != 8 && event.keyCode != 9 && event.keyCode != 13 && event.keyCode != 46) {

 

                var txtStart = document.getElementById(obj_id);

                var txtEnd = document.getElementById(targetobj_id);

 

                if (txtStart.value.length >= obj_maxlength) {

                    txtEnd.focus();

                }

            }

        }

        // 텍스트 박스 이전 포커스 이동

        function fn_PreviousFouse(obj_id, targetobj_id) {

 

            var obj = document.getElementById(obj_id);

            var target_obj = document.getElementById(targetobj_id);

 

            if (event.keyCode == 8 && obj.value.length == 0) {

                target_obj.focus();

                target_obj.value = target_obj.value;

            }

        }

    </script>

사용방법)

onkeydown="fn_onlyNum(this, this.value);fn_NextFocus(this.id, 'tbxMinbun2', 6);"

onkeydown="fn_onlyNum(this, this.value);fn_PreviousFouse(this.id, 'tbxMinbun1');"

 

한글인 경우 써지는 버그가 있다. 그럴경우엔 이걸 넣어주면된다.

style="ime-mode:active" 한글모드

style="ime-mode:inactive" 영문모드

style="ime-mode:disabled" 오직영문모드