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

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

现在我想转到下一个HTML元素，比如说下一个文本框（与选项卡的功能相同），按code键412和code键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执行下一步和上一步操作，将元素包装在

div

中，并向其添加

keypress

事件处理程序

---

此页面底部有一个示例：

您可以使用and属性访问上一个和下一个DOM同级（如果有），使用and属性访问上一个和下一个元素同级（如果有）。如果要在它们之间移动的元素并非都是兄弟元素，那么这就变得更加棘手。JS库将是一个很大的帮助，简化遍历

您还可以使用属性预处理表单，按顺序创建输入集合并跟踪当前输入，在用户按下相应键或输入获得或失去焦点时进行更新

基于DOM的方法（未经测试，可能有缺陷）：

if（！Array.prototype.append）{
Array.prototype.append=函数（arr）{
此。推。应用（此，arr）；
}
}
if（！Array.prototype.each）{
Array.prototype.each=函数（f）{
对于（变量i=0；i0）{
输入[++currIdx].focus（）；
}
}
表单.addEventListener（'keypress'，函数（evt）{
if（evt[修改器]）{
开关（String.fromCharCode（evt.keyCode）.toLowerCase（））{
案例下一个关键点：
evt.stopPropagation（）；
evt.preventDefault（）；
this.gotoNextInput（）；
返回false；
案例关键：
evt.stopPropagation（）；
evt.preventDefault（）；
this.gotoPreviousInput（）；
返回false；
}
}
}，对）；
//上述焦点的编程设置应调用此
//处理程序。浪费，但没有问题。
表单.addEventListener（'focus'，函数（evt）{
if（evt.target.keyedIdx的类型=='number'）{
currIdx=evt.target.keyedIdx；
}
}，对）；
表单.addEventListener（'blur'，函数（evt）{
删除currIdx；
}，对）；
}

首先，按所需顺序构建包含所有元素的数组：

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

功能键检查（evt）{
如果（evt的类型==“未定义”| |！evt）
evt=window.event；//即。。。
var-KeyID=evt.which | | evt.keyCode；
var标志=0；
开关（KeyID）{
案例34：
flag=-1；//向后
打破
案例33：
flag=1；//向前
打破
}
如果（标志==0）
return；//键不相关
var sender=evt.target | | evt.src元素；
如果（！发送方）
return；//向上键不是来自有效元素
var-nIndex=-1；
对于（变量i=0；i<\u arrElements.length；i++）{
if（sender.id==\u欠款项[i]）{
nIndex=i；
打破
}
}
如果（nIndex<0）
return；//向上键不是来自有效的文本框
var newIndex=nIndex+flag；
if（newIndex>=\u arrElements.length）
newIndex=0；
如果（新索引<0）
newIndex=_arrements.length-1；
document.getElementById（_arElements[newIndex]）.focus（）；
}

包含完整代码的实时测试用例可在以下位置获得：

在这个示例中，我使用的是

向上翻页

/

向下翻页

，不知道是什么键生成了您给出的代码

编辑：你可以把身份证的任何时候

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