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
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 3374 | 14년 전 | 12950 | ||
| 3373 | 14년 전 | 6518 | ||
| 3372 | 14년 전 | 5181 | ||
| 3371 |
 똥싼너구리 |
14년 전 | 6819 | |
| 3370 | 14년 전 | 10524 | ||
| 3369 | 13년 전 | 4925 | ||
| 3368 |
별지기천사
|
13년 전 | 1730 | |
| 3367 | 13년 전 | 3107 | ||
| 3366 | 13년 전 | 2197 | ||
| 3365 | 13년 전 | 1730 | ||
| 3364 | 13년 전 | 3008 | ||
| 3363 |
127시간
|
13년 전 | 2001 | |
| 3362 | 13년 전 | 2621 | ||
| 3361 | 13년 전 | 2656 | ||
| 3360 |
 TopSchooL |
13년 전 | 8122 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기