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 의 라이센스를 따릅니다.
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 의 라이센스를 따릅니다.
댓글 3개
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();
});
14년 전
좀 짱인 듯!!
MH코리아
14년 전
역시..관리자답게 멎지네요 ㅎㅎ 디자인만.>~살짝쿵바뀐다면야 아주 멎진 대작이 탄생할거같습니다. ㅎㅎ
게시판 목록
그누4 플러그인
그누보드에는 여러가지 기능 추가가 쉽도록 제작 되었습니다.
플러그인의 저작권은 해당 플러그인 제작자님께 있으며, 그누보드의 저작권과 다를 수 있습니다.
플러그인 다운로드시 좋아요와 감사의 코멘트를 남기시면 제작자에게 큰 힘이됩니다. ^^y
플러그인의 저작권은 해당 플러그인 제작자님께 있으며, 그누보드의 저작권과 다를 수 있습니다.
플러그인 다운로드시 좋아요와 감사의 코멘트를 남기시면 제작자에게 큰 힘이됩니다. ^^y
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 3419 | 13년 전 | 8459 | ||
| 3418 | 13년 전 | 4761 | ||
| 3417 | 13년 전 | 6032 | ||
| 3416 | 13년 전 | 6711 | ||
| 3415 |
eVerRock
|
13년 전 | 6523 | |
| 3414 | 13년 전 | 7820 | ||
| 3413 | 13년 전 | 5164 | ||
| 3412 | 13년 전 | 4521 | ||
| 3411 | 13년 전 | 4314 | ||
| 3410 | 13년 전 | 12949 | ||
| 3409 | 13년 전 | 5438 | ||
| 3408 | 13년 전 | 6683 | ||
| 3407 |
 hy미디어 |
13년 전 | 8306 | |
| 3406 | 13년 전 | 6816 | ||
| 3405 | 13년 전 | 7675 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기