Java Script를 사용하여 다음 HTML 요소로 이동하는 방법

Question

끝에 5 개의 텍스트 상자와 하나의 단추가있는 기본 HTML 페이지가 있다고 가정합니다.

지금 내가 다음 HTML 요소에 가고 싶어,의 말의 키 코드 412의 인쇄기 및 키 코드 417의 보도에합니다 (탭이처럼 동일) 다음 텍스트 상자를 보자, 내가해야 이전 요소 (예 : Shift + Tab과 동일)로 돌아갈 수 있습니다.

이제 Tab을 사용할 수 없거나 내 키 보드에 Tab 키가 없다고 말할 수 있습니다. 도움이 필요해.

잘 키 누름을 감지하는 코드는 다음과 같습니다 :

document.onkeyup = KeyCheck;  
function KeyCheck() 

{ 

    var KeyID = event.keyCode; 
    document.Form1.KeyName.value = event.keyCode; 

    switch(KeyID) 

    { 

     case 412: 

     document.Form1.KeyName.value = "Rewind Prseesd"; 

     break; 

     case 417: 

     document.Form1.KeyName.value = "Forward Pressed"; 

     break; 
     .................... 
} 

가 지금은 키 코드 412, 417

Answer 1

첫째, 원하는 순서에있는 모든 요소와 배열을 구축 :

var _arrElements = [ "myInput1", "myInput2", "myInput3" ]; 

둘째, 당신의 코드를 변경 키를 누른 텍스트 상자를 검색하고 배열에서 해당 ID를 찾고 앞이나 뒤에 적절한 텍스트 상자에 포커스를 지정합니다.

function KeyCheck(evt) { 
    if (typeof evt == "undefined" || !evt) 
     evt = window.event; //IE... 

    var KeyID = evt.which || evt.keyCode; 
    var flag = 0; 
    switch(KeyID) { 
     case 34: 
      flag = -1; //Backward 
      break; 
     case 33: 
      flag = 1; //Forward 
      break; 
    } 
    if (flag == 0) 
     return; //key is not relevant 

    var sender = evt.target || evt.srcElement; 
    if (!sender) 
     return; //key up did not come from valid element 

    var nIndex = -1; 
    for (var i = 0; i < _arrElements.length; i++) { 
     if (sender.id == _arrElements[i]) { 
      nIndex = i; 
      break; 
     } 
    } 
    if (nIndex < 0) 
     return; //key up did not come from valid textbox 

    var newIndex = nIndex + flag; 
    if (newIndex >= _arrElements.length) 
     newIndex = 0; 
    if (newIndex < 0) 
     newIndex = _arrElements.length - 1; 
    document.getElementById(_arrElements[newIndex]).focus(); 
} 

전체 코드

라이브 테스트 케이스는 여기에 있습니다 : http://jsfiddle.net/yahavbr/vAh8R/ 내가 Page Up/Page Down, 키 당신이 준 코드를 생성한다 상관 아이디어를 사용하고 예에서

.

편집 : 배열에 원하는 모든 포커스 가능 요소의 ID를 넣을 수 있지만 텍스트 상자 일 필요는 없습니다.

Answer 2

랩 div의 요소에 다음 및 이전을하고 keypress을 추가 할 그것에 대한 이벤트 핸들러.

이 페이지 하단의 예를 가지고 : http://www.quirksmode.org/js/keys.html

Answer 3

당신은 함께 previousSibling 및 nextSibling 특성, 이전 및 다음 요소 형제 (있는 경우)로 이전 및 다음 DOM 형제 (있는 경우)에 액세스 할 수 있습니다

previousElementSibling 및 nextElementSibling 속성 사이를 이동하려는 요소가 모두 다른 형제가 아닌 경우 이는 더욱 까다로워집니다. JS 라이브러리는 탐색을 단순화하는 큰 도움이 될 것입니다. tabIndex 위해 입력 콜렉션을 생성하고, 사용자가 해당 키하거나, 입력 게인을 누르거나 포커스를 잃을 때마다 갱신하는 현재 입력 트랙을 지키는 elements 속성을 사용

또한 수 전처리 형태.

DOM 기반의 접근 방식 (안된, 가능 아마 버그) :

이

if (! Array.prototype.append) { 
    Array.prototype.append = function(arr) { 
     this.push.apply(this, arr); 
    } 
} 
if (! Array.prototype.each) { 
    Array.prototype.each = function(f) { 
     for (var i=0; i < this.length; ++i) { 
      f(this[i], i); 
     } 
    } 
} 
if (! Array.prototype.filter) { 
    Array.prototype.filter = function(f) { 
     var other = []; 
     if (!f) { 
      f = function (x) {return x;}; 
     } 
     for (var i=0; i < this.length; ++i) { 
      if (f(this[i])) { 
       other.push(this[i]); 
      } 
     } 
     return other; 
    } 
} 

// call this on the form element 
function keyNavigation(form, nextKey, prevKey, modifier) { 
    if (nextKey) { 
     nextKey = nextKey.toLowerCase(); 
    } else { 
     nextKey = 'n'; 
    } 
    if (prevKey) { 
     prevKey = prevKey.toLowerCase(); 
    } else { 
     prevKey = 'p'; 
    } 
    switch (modifier) { 
    case 'ctrlKey': 
    case 'altKey': 
    case 'metaKey': 
     break; 
    case 'ctrl': 
    case 'alt': 
    case 'meta': 
     modifier += 'Key'; 
     break; 
    default: 
     modifier = 'ctrlKey'; 
     break; 
    } 
    var inputs=[], assigned = [], unassigned=[], input, j=0; 
    for (var i=0; i < form.elements.length; ++i) { 
     input = form.elements[i]; 
     if (input.tabIndex) { 
      j = input.tabIndex; 
      while(assigned[j]) {++j} 
      assigned[j] = input; 
     } else if (!input.disabled) { 
      unassigned.push(input); 
     } 
    } 
    inputs = assigned.filter(); 
    inputs.append(unassigned); 
    inputs.each(function (input, keyedIdx) { 
     input.keyedIdx = keyedIdx; 
    }); 

    var currIdx; 

    form.gotoNextInput = function() { 
     // if currIdx is undefined, comparison should be false 
     if (currIdx+1 < inputs.length) { 
      inputs[++currIdx].focus(); 
     } 
    } 
    form.gotoPreviousInput = function() { 
     // if currIdx is undefined, comparison should be false 
     if (currIdx && currIdx > 0) { 
      inputs[++currIdx].focus(); 
     } 
    } 
    form.addEventListener('keypress', function (evt) { 
      if (evt[modifier]) { 
       switch (String.fromCharCode(evt.keyCode).toLowerCase()) { 
        case nextKey: 
         evt.stopPropagation(); 
         evt.preventDefault(); 
         this.gotoNextInput(); 
         return false; 
        case prevKey: 
         evt.stopPropagation(); 
         evt.preventDefault(); 
         this.gotoPreviousInput(); 
         return false; 
       } 
      } 
     }, true); 
    // programmatic setting of focus above should invoke this 
    // handler. Wasteful, but not problematic. 
    form.addEventListener('focus', function (evt) { 
      if (typeof evt.target.keyedIdx == 'number') { 
       currIdx = evt.target.keyedIdx; 
      } 
     }, true); 
    form.addEventListener('blur', function (evt) { 
      delete currIdx; 
     }, true); 
}