방향키로 커서 이동

Carpe Programming/javascript

방향키로 커서 이동

nolite 2011. 10. 18. 14:51

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<table border='1' id='table1'>
  <tr>
   <td><input type='text' onkeydown='moveFocus(this)'></td>
   <td><input type='text' onkeydown='moveFocus(this)'></td>
   <td><input type='text' onkeydown='moveFocus(this)'></td>
   <td><input type='text' onkeydown='moveFocus(this)'></td>
   <td><input type='text' onkeydown='moveFocus(this)'></td>
  </tr>
  <tr>
   <td><input type='text' onkeydown='moveFocus(this)'></td>
   <td><input type='text' onkeydown='moveFocus(this)'></td>
   <td><input type='text' onkeydown='moveFocus(this)'></td>
   <td><input type='text' onkeydown='moveFocus(this)'></td>
   <td><input type='text' onkeydown='moveFocus(this)'></td>
  </tr>
  <tr>
   <td><input type='text' onkeydown='moveFocus(this)'></td>
   <td><input type='text' onkeydown='moveFocus(this)'></td>
   <td><input type='text' onkeydown='moveFocus(this)'></td>
   <td><input type='text' onkeydown='moveFocus(this)'></td>
   <td><input type='text' onkeydown='moveFocus(this)'></td>
  </tr>
  <tr>
   <td><input type='text' onkeydown='moveFocus(this)'></td>
   <td><input type='text' onkeydown='moveFocus(this)'></td>
   <td><input type='text' onkeydown='moveFocus(this)'></td>
   <td><input type='text' onkeydown='moveFocus(this)'></td>
   <td><input type='text' onkeydown='moveFocus(this)'></td>
  </tr>
  <tr>
   <td><input type='text' onkeydown='moveFocus(this)'></td>
   <td><input type='text' onkeydown='moveFocus(this)'></td>
   <td><input type='text' onkeydown='moveFocus(this)'></td>
   <td><input type='text' onkeydown='moveFocus(this)'></td>
   <td><input type='text' onkeydown='moveFocus(this)'></td>
  </tr>
</table>
</BODY>
</HTML>
<script language='JavaScript'>
function moveFocus(oElement){
var parentTable=oElement.parentElement.parentElement.parentElement.parentElement;
var parentTr = oElement.parentElement.parentElement;
var parentTd = oElement.parentElement;

var targetObject=null;

var currTrseq=0;
var currTdseq=0;

var targetTrseq=0;
var targetTdseq=0;

var len=0;

len=parentTr.cells.length;
for(var i=0;i<len;i++){
  if(parentTr.cells[i]==parentTd){
   currTdseq=i;
  }
}

len=parentTable.rows.length;
for(var i=0;i<len;i++){
  if(parentTable.rows[i]==parentTr){
   currTrseq=i;
  }
}

//아래로
if(event.keyCode==40){
  if(currTrseq==parentTable.rows.length-1){
   targetTrseq=0;
  }else{
   targetTrseq=currTrseq+1;
  }
  targetTdseq=currTdseq;
}else
//오른쪽
if(event.keyCode==39){
  if(currTdseq==parentTr.cells.length-1){
   targetTdseq=0;
  }else{
   targetTdseq=currTdseq+1;
  }
  targetTrseq=currTrseq;
}else
//위로
if(event.keyCode==38){
  if(currTrseq==0){
   targetTrseq=parentTable.rows.length-1;
  }else{
   targetTrseq=currTrseq-1;
  }
  targetTdseq=currTdseq;
}else
//왼쪽
if(event.keyCode==37){
  if(currTdseq==0){
   targetTdseq=parentTr.cells.length-1;
  }else{
   targetTdseq=currTdseq-1;
  }
  targetTrseq=currTrseq;
}
targetObject = parentTable.rows[targetTrseq].cells[targetTdseq].firstChild;
targetObject.value=targetTdseq+","+targetTrseq;

if(targetObject.style.color=="red"){
  targetObject.style.color="blue";
}else{
  targetObject.style.color="red";
}

targetObject.focus();
}
</script>

728x90

저작자표시

'Carpe Programming > javascript' 카테고리의 다른 글

정규표현식 (0)	2011.10.18
textarea에 mexlength 주기 (0)	2011.10.18
[javascript] 일부 영역 인쇄하기 (0)	2011.09.01
[레이어 띄우기] 로드 중.. 업로드 중... 등 (0)	2011.08.29
[javascript] 업로드 파일 확장자 및 용량 체크 (0)	2011.08.27

현재글방향키로 커서 이동