如何转到使用Java脚本的下一个HTML元素

Question

假设我有一个基本的HTML页面，最后有5个文本框和一个按钮。

现在我想进入下一个HTML元素，比方说，下一个文本框（同标签一样），对关键代码报刊和关键代码新闻，我应该是能够返回到前一个元素（与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库将是一个很大的帮助，简化遍历。

您还可以使用elements属性预处理表单，以tabIndex顺序创建一组输入并跟踪当前输入，每当用户按下相应的键或输入增益或失去焦点时更新。

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); 
}