그누보드 - jQuery Ctrl + 화살표키로 element 이동

jQuery Ctrl + 화살표키로 element 이동 > 그누4 플러그인

그누4 플러그인

그누보드에는 여러가지 기능 추가가 쉽도록 제작 되었습니다.
플러그인의 저작권은 해당 플러그인 제작자님께 있으며, 그누보드의 저작권과 다를 수 있습니다.
플러그인 다운로드시 좋아요와 감사의 코멘트를 남기시면 제작자에게 큰 힘이됩니다. ^^y

jQuery Ctrl + 화살표키로 element 이동 정보

jQuery Ctrl + 화살표키로 element 이동

본문

Ctrl + 화살표키로 element 이동

1. element 의 name 은 반드시 있어야 하며, id 는 없어도 된다.
2. 현재 커서가 위치한 element 와 위, 아래 element 의 name 은 같아야 한다.
3. element 의 이동은 같은 form 안에서만 가능하다.
4. element 가 disabled 나 hidden 속성을 가지면 건너뛴다.
5. ie, 크롬, 불여우에서 테스트 했으며 불여우는 selectbox 에서 옵션이 변경되는 버그가 있음. phpMyAdmin 도 동일한 현상이 있음. (브라우저 버그)
7. 나머지는 소스를 확인하세요.

링크에서 직접 확인하실 수 있습니다.

phpMyAdmin 에 있는 기능을 흠모(?)하던 중 jQuery 로 비슷하게 구현해 보았습니다.
phpMyAdmin 은 element 의 id 값을 이용하여 x, y 값을 변경하는 것에 비해 이 플러그인은 id 값 설정없이 같은 form 안에 있는 element 간 이동을 합니다.
소스코드는 수시로 변경이 될수 있으므로 소스보기를 한후 해당 jQuery 소스코드를 복사해서 사용하시기 바랍니다. 이 소스코드는 jQuery 의 라이센스를 따릅니다.

댓글 전체

관리자 자기소개 아이디로 검색 전체게시물 회원게시물

자기소개 아이디로 검색 전체게시물 회원게시물

11.11.24 20:39:14

이 코드입니다.

$("form").find("input, select, textarea").keydown(function(e) {
if (!e.ctrlKey) return;

var $find = null;
if (e.keyCode == 37) {
// 왼쪽
$(this).prevAll("input, select, textarea").each(function() {
if ($(this).is(":visible") && $(this).is(":enabled")) {
$find = $(this);
return false;
}
});

if ($find) {
$find.focus().select();
return false;
}

$(this).parent("td").prevAll("td").each(function() {
// element 를 오른쪽(거꾸로)부터 가지고 와야 한다.
$( $(this).children("input, select, textarea").get().reverse() ).each(function() {
if ($(this).is(":visible") && $(this).is(":enabled")) {
$find = $(this);
return false;
}
});

if ($find)
return false;
});

if ($find) {
$find.focus().select();
return false;
}
}
else if (e.keyCode == 38) {
// 위
$(this).parents("tr").prev("tr").find("[name='"+this.name+"']").focus().select();
}
else if (e.keyCode == 39) {
// 오른쪽
$(this).nextAll("input, select, textarea").each(function() {
if ($(this).is(":visible") && $(this).is(":enabled")) {
$find = $(this);
return false;
}
});

if ($find) {
$find.focus().select();
return false;
}

$(this).parent("td").nextAll("td").children("input, select, textarea").each(function() {
if ($(this).is(":visible") && $(this).is(":enabled")) {
$find = $(this);
return false;
}
});

if ($find) {
$find.focus().select();
return false;
}
}
else if (e.keyCode == 40) {
// 아래
$(this).parents("tr").next("tr").find("[name='"+this.name+"']").focus().select();
}

e.preventDefault();
});

이 코드입니다.

$("form").find("input, select, textarea").keydown(function(e) {
    if (!e.ctrlKey) return;

var $find = null;
    if (e.keyCode == 37) {
        // 왼쪽
        $(this).prevAll("input, select, textarea").each(function() {
            if ($(this).is(":visible") && $(this).is(":enabled")) {
                $find = $(this);
                return false;
            }
        });

if ($find) {
            $find.focus().select();
            return false;
        }

$(this).parent("td").prevAll("td").each(function() {
            // element 를 오른쪽(거꾸로)부터 가지고 와야 한다.
            $( $(this).children("input, select, textarea").get().reverse() ).each(function() {
                if ($(this).is(":visible") && $(this).is(":enabled")) {
                    $find = $(this);
                    return false;
                }
            });

if ($find)
                return false;
        });

if ($find) {
            $find.focus().select();
            return false;
        }
    }
    else if (e.keyCode == 38) {
        // 위
        $(this).parents("tr").prev("tr").find("[name='"+this.name+"']").focus().select();
    }
    else if (e.keyCode == 39) {
        // 오른쪽
        $(this).nextAll("input, select, textarea").each(function() {
            if ($(this).is(":visible") && $(this).is(":enabled")) {
                $find = $(this);
                return false;
            }
        });

if ($find) {
            $find.focus().select();
            return false;
        }

$(this).parent("td").nextAll("td").children("input, select, textarea").each(function() {
            if ($(this).is(":visible") && $(this).is(":enabled")) {
                $find = $(this);
                return false;
            }
        });

if ($find) {
            $find.focus().select();
            return false;
        }
    }
    else if (e.keyCode == 40) {
        // 아래
        $(this).parents("tr").next("tr").find("[name='"+this.name+"']").focus().select();
    }

e.preventDefault();
});