Javascript 当当前输入有值时，如何前进到下一个表单输入？

我有一个有很多条目的表格。在当前文本框中输入值后，我想将焦点切换到下一个文本框。我想继续这个过程直到最后一个字段。我的问题是，在文本框中输入值后，是否可以通过Javascript编码模拟按下tab键时发生的情况

不用按键盘上的tab键，我想通过Javascript实现同样的功能。这可能吗？

功能下一个字段（当前）{
function nextField(current){
    for (i = 0; i < current.form.elements.length; i++){
        if (current.form.elements[i].tabIndex - current.tabIndex == 1){
            current.form.elements[i].focus();
            if (current.form.elements[i].type == "text"){
                current.form.elements[i].select();
            }
        }
    }
}

对于（i=0；i

当与当前字段一起提供时，将焦点转移到具有下一个选项卡索引的字段。用法如下

<input type="text" onEvent="nextField(this);" />

---

您只需将焦点赋予下一个输入字段（通过对该输入元素调用focus（）方法），例如，如果您使用jQuery，则按下enter键时，此代码将模拟tab键：

var inputs = $(':input').keypress(function(e){ 
    if (e.which == 13) {
       e.preventDefault();
       var nextInput = inputs.get(inputs.index(this) + 1);
       if (nextInput) {
          nextInput.focus();
       }
    }
});

---

不久前需要模拟选项卡功能，现在我已经使用了

：一个jQuery插件，用于模拟页面上元素之间的制表符

你可以

if（MyTextHasbeenFilled WithText）{
//制表符切换到#我的文本输入之后的下一个输入
$（“#我的文本输入”）.emulateTab（）；
}

在第一个问题中，您不需要在每个输入上都使用一个事件监听器，这会造成浪费

相反，听回车键并使用

document.activeElement

window.onkeypress = function(e) {
    if (e.which == 13) {
       e.preventDefault();
       var nextInput = inputs.get(inputs.index(document.activeElement) + 1);
       if (nextInput) {
          nextInput.focus();
       }
    }
};

---

一个事件监听器比许多事件监听器更好，尤其是在低功耗/移动浏览器上。

我已经找到了ltiong\u sh的答案：

function nextField(current){
    var elements = document.getElementById("my-form").elements;
    var exit = false;
    for(i = 0; i < elements.length; i++){   
        if (exit) {
            elements[i].focus();
            if (elements[i].type == 'text'){
                elements[i].select();
            }   
            break;
        }
        if (elements[i].isEqualNode(current)) { 
            exit = true;
        }       
    }
}

功能下一个字段（当前）{
var elements=document.getElementById（“我的表单”）.elements；
var exit=false；
对于（i=0；i

这将通过表单模拟选项卡，并在按下enter键时将焦点放在下一个输入上

window.onkeypress = function(e) {
    if (e.which == 13) {
        e.preventDefault();
        var inputs = document.getElementsByClassName('input');
        for (var i = 0; i < inputs.length; i++) {
        if (document.activeElement.id == inputs[i].id && i+1 < inputs.length ) {
            inputs[i+1].focus();
            break;   
        }
    }

window.onkeypress=功能（e）{
如果（e.which==13）{
e、 预防默认值（）；
var inputs=document.getElementsByClassName（'input'）；
对于（变量i=0；i

我找不到一个可以满足我要求的答案。我遇到了一个问题，其中有一些链接元素我不希望用户使用Tab键。这就是我想到的：

（注意，在我自己的代码中，我在

等位基因

行中使用了

a:not（.dropdown item）

而不是

a

，以防止用户切换到

a.dropdown-item

）

---

这应该有效。使用和不使用tabindex

var currentlyFocused=未定义；
var tabableElements=未定义；
/**
*元素排序的比较函数
*@param{string | null}a
*@param{string | null}b
*@param{boolean}asc
*/
函数排序比较（a、b、asc=true）{
设result=null；
如果（a==null）结果=1；
如果（b==null）结果=-1，则为else；
如果（parseInt（a）>parseInt（b））结果=1；
否则如果（parseInt（a）{
//如果没有聚焦元素，则返回
如果（！currentlyFocused）返回；
if（当前聚焦等质量节点（el））{
//分配当前索引并返回
currentIndex=idx；
返回；
}
});
//如果没有聚焦元素或当前聚焦元素是最后一次重新开始
设lastIndex=tabableElements.length-1；
设NextElementDX=currentIndex==undefined | | currentIndex==lastIndex？0:currentIndex+1；
//焦点
currentlyFocused=tabableElements[NextElementDX]；
currentlyFocused.focus（）；
}
/**
*必须在dom中加载所有元素后运行Init
*/
函数init（）{
//获取所有可制表符的元素
让nodeList=document.queryselectoral（“输入，按钮，a，区域，对象，选择，文本区域，[tabindex]”）；
//设置数组以便于操作
tabableElements=Array.prototype.slice.call（nodeList，0）；
//更正选项卡索引以确保正确的顺序
tabableElements.forEach（（el、idx、list）=>{
设tabindex=el.getAttribute（“tabindex”）；
//-1 tabindex将不接收焦点
if（tabindex=-1）list.splice（idx，1）；
//按正常源顺序为null或0 tabindex
else if（tabindex==null | | tabindex==0）{
列表[idx].setAttribute（“tabindex”，9999+idx）；
}
});
//按元素的tabindex按升序排序元素
tabableElements.sort（（elementA，elementB）=>sortCompare（elementA.getAttribute（“tabindex”）、elementB.getAttribute（“tabindex”）；
//将焦点事件注册到元素
forEach（el=>RegisterElementFocus（el））；
}

虚拟选项卡
虚拟选项卡演示
标签！




按钮1
按钮2




文本


密码


数
function(event){
        //Note that this doesn't honour tab-indexes

        event.preventDefault();

        //Isolate the node that we're after
        const currentNode = event.target;

        //find all tab-able elements
        const allElements = document.querySelectorAll('input, button, a, area, object, select, textarea, [contenteditable]');

        //Find the current tab index.
        const currentIndex = [...allElements].findIndex(el => currentNode.isEqualNode(el))

        //focus the following element
        const targetIndex = (currentIndex + 1) % allElements.length;
        allElements[targetIndex].focus();
}

handlePseudoTab(direction) {
    if (!document.hasFocus() || !document.activeElement) {
        return;
    }
    const focusList = $(":focusable", $yourHTMLElement);
    const i = focusList.index(document.activeElement);
    if (i < 0) {
        focusList[0].focus(); // nothing is focussed so go to list item 0
    } else if (direction === 'next' && i + 1 < focusList.length) {
        focusList[i + 1].focus(); // advance one
    } else if (direction === 'prev' && i - 1 > -1) {
        focusList[i - 1].focus(); // go back one
    }
}

function keydownFunc(event) {
      var x = event.keyCode;        
      if (x == 13) {
        try{
            var nextInput = event.target.parentElement.nextElementSibling.childNodes[0];
            nextInput.focus();
          }catch (error){
            console.log(error)
          }
    }