如何使用javascript强制“输入键”充当“tab键”？答案

【问题标题】：How to force "enter key" to act as "tab key" using javascript?如何使用javascript强制“输入键”充当“tab键”？
【发布时间】：2012-05-19 05:39:14
【问题描述】：

我正在处理一个充满要填写的表单的网站，我要求当按下退出按钮时焦点移动到下一个输入控件，就像按下“tab”一样。我找到了在按键为 13 时移动焦点的代码，但这需要获取元素的 ID 来关注

<input id="Text1" type="text" onkeydown="return noNumbers(event)" />
<input id="Text2" type="text" />

<script type="text/javascript">

    function noNumbers(e) {

        keynum = e.which;

        if (keynum == 13)
            document.getElementById("Text2").focus();

    }
</script>

我需要一个通用函数，当按键代码为 13“即回车”时，触发默认事件，即按下 9“即制表符”，当然是在 Javascript 中

【问题讨论】：

那么按回车/回车键不会提交表单？
我认为你需要先阻止回车键（developer.mozilla.org/en/DOM/event.preventDefault）的默认操作，然后做任何你想做的事情
类似于http://stackoverflow.com/questions/4604930/changing-the-keypress的帖子。
您在第一句话中的意思是“进入”而不是“逃脱”吗？
joelpurra.com/projects/plusastab

标签： javascript keyevent onkeydown

【解决方案1】：

这将处理多个输入字段。

这里是 jQuery 版本： http://jsfiddle.net/TnEB5/3/

$('input').keypress(function(e) {
    if (e.which == 13) {
        $(this).next('input').focus();
        e.preventDefault();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="Text1" type="text"  />
<input id="Text2" type="text" />
<input id="Text3" type="text" />

这是纯 javascript 版本： http://jsfiddle.net/TnEB5/5/ （您可能希望以不同的方式获得兄弟姐妹）

function tab(e) {
    if (e.which == 13) {
        e.target.nextSibling.nextSibling.focus();
        e.preventDefault();
    }
}
var inputs = document.getElementsByTagName('input');
for (var x = 0; x < inputs.length; x++)
{
    var input = inputs[x];
    input.onkeypress = tab;
}

<input id="Text1" type="text"  />
<input id="Text2" type="text" />
<input id="Text3" type="text" />

【讨论】：

OP 没有提到 jQuery。
是的，但他没有说不是，而且不难添加。使用 jQuery 会更容易提供更灵活的解决方案。
我添加了javascript版本。

【解决方案2】：

改为处理按键并将 false 返回给浏览器：

http://jsfiddle.net/EeyTL/

<input id="Text1" type="text" />
<input id="Text2" type="text" />

<script type="text/javascript">
    document.getElementById('Text1').onkeypress = function (e) {
        if (e.which === 13) {
            document.getElementById("Text2").focus();
            return false;
        }
    };
</script>

【讨论】：

【解决方案3】：

您需要为通用解决方案显式设置输入字段的tabindex 属性。类似的东西

<input id="Text1" type="text" tabindex="1" />
<input id="Text2" type="text" tabindex="2" />

<script type="text/javascript">
    $('input').keypress(function(e){
        if(e.which==13){ 
            $("[tabindex='"+($(this).attr("tabindex")+1)+"']").focus();
            e.preventDefault();
        }
    });    
</script>

此解决方案使用 jquery 为页面上的所有输入类型元素分配事件处理程序，将焦点设置到具有下一个最高 tabindex 属性的元素，并在使用 e.preventDefault() 按下 enter 时阻止表单提交。这是jfiddle

【讨论】：

$(this).attr("tabindex")+1 是错误的，因为它将 tabindex 添加为字符串（“1”+1 = “11”），这有效：parseInt($(this).attr("tabindex"))+1

【解决方案4】：

<input type="text" value="" onkeyup="doNext(this);"> a <br>
<input type="text" value="" onkeyup="doNext(this);"> b <br>
<input type="text" value="" onkeyup="doNext(this);"> c <br>

function doNext(el){                   
  if(event.keyCode=='13'){
    var nextEl = el.form.elements[el.tabIndex+1];
    if (nextEl && nextEl.focus) nextEl.focus();
  }
}

【讨论】：

【解决方案5】：

虽然帖子很旧，但我希望我的回答可以帮助有需要的人。我有一个类似的情况：

我有一个非常大的表单，用于具有不同类型的输入字段的员工调度程序应用程序。某些输入字段有时会隐藏，有时不会。我被要求将 enter 键设置为 tab 键，以便表单的用户在创建他们的员工时间表时可以使用 10 键。以下是我解决问题的方法：

$(document).ready(function () {
    var allInputs = $(':text:visible'); //(1)collection of all the inputs I want (not all the inputs on my form)
    $(":text").on("keydown", function () {//(2)When an input field detects a keydown event
        if (event.keyCode == 13) {
            event.preventDefault();
            var nextInput = allInputs.get(allInputs.index(this) + 1);//(3)The next input in my collection of all inputs
            if (nextInput) {
                nextInput.focus(); //(4)focus that next input if the input is not null
            }
        }
    });
});

我要做的是：

创建一个包含我在切换时要考虑的所有输入的集合。就我而言，是可见的文本输入。
监听相关输入的 keydown 事件，在我的例子中是所有文本字段输入
在我的文本输入上按下 Enter 后，确定接下来要关注的输入。
如果该输入有效，请将其设为焦点。

【讨论】：

【解决方案6】：

我正在使用此代码前进到下一个输入字段。我讨厌按 TAB 键。此解决方案适用于 IE 和 Firefox：

<script type="text/javascript"> 
  function tabE(obj,e){ 
   var e=(typeof event!='undefined')?window.event:e;// IE : Moz 
   if(e.keyCode==13){ 
     var ele = document.forms[0].elements; 
     for(var i=0;i<ele.length;i++){ 
       var q=(i==ele.length-1)?0:i+1;// if last element : if any other 
       if(obj==ele[i]){ele[q].focus();break} 
     } 
  return false; 
   } 
  } 
</script>

HTML 内容

<form id="main">
     <input name="" type="text" onkeypress="return tabE(this,event)">
     <input type="submit" value="Ok">
</form>

【讨论】：

【解决方案7】：

这是一个简单的解决方案。基本上，您包含 enter2tab.js 文件，然后在您希望输入的每个对象上添加 enter2tab 类，以将其视为 js。

https://github.com/AndreasGrip/enter2tab

您显然可以查看代码以了解它的作用和方式..

【讨论】：

【解决方案8】：

我相信使用 e.preventDefault();比返回 false 更安全。

【讨论】：