input 창에서 enter 입력시 Tab 기능 구현하기

input 창에서 Tab 기능 구현하기

[html]

<form id="" action="">

<div>

    <input type="text" tabIndex="1" onkeydown="return tab(this, event)" /><br />

</div>

<div>

    <input type="text" " tabIndex="2" /><br />

</div>

    <input type="submit" value="send" tabIndex="3" />

</form>

위 구문중 핵심은 tabIndex="1" onkeydown="return tab(this, event)" 이부분이다 

매번 input 안에 순차적으로 입력해두면 tabIndex= 로 넘어간다.

[script]

function tab(field, event) {

    if (event.which == 13 /* IE9/Firefox/Chrome/Opera/Safari */ || event.keyCode == 13 /* IE8 and earlier */ ) {

        for (i = 0; i < field.form.elements.length; i++) {

            if (field.form.elements[i].tabIndex == field.tabIndex + 1) {

                field.form.elements[i].focus();

                if (field.form.elements[i].type == "text") {

                    field.form.elements[i].select();

                    break;

                }

            }

        }

        return false;

    }

    return true;

}

위 스크립과 함께 사용되며, 여기까지 input 창에서 enter 를 입력시 tab 기능을 구현하는 소스이다.