如何使用javascript强制“输入键”充当“Tab键”

How to force "enter key" to act as "tab key" using javascript?

本文关键字：输入键 充当 Tab 输入 何使用 javascript 强制      更新时间：2023-09-26

我正在一个充满要填写的表单的网站上工作，我需要在按下转义按钮时移动到下一个输入控件，就像按"选项卡"一样。我发现当按键是 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 "即输入"时，当然在 Javascript 中会触发按 9"即制表符"的默认事件

这将处理多个输入字段。

以下是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" />

改为处理按键并将 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>

您需要显式设置通用解决方案的输入字段的 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

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

虽然这篇文章很旧，但我希望我的回答可以帮助有需要的人。我有一个微笑的情况：

我有一个非常大的表单，用于员工调度程序应用程序，其中包含不同类型的输入字段。某些输入字段有时会隐藏，有时不会隐藏。我被要求使 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
            }
        }
    });
});

我要做的就是：

  1. 创建我在 Tab 键时要考虑的所有输入的集合。 就我而言，它是可见的文本输入。
  2. 侦听相关输入上的键控事件，在我的例子中是所有文本字段输入
  3. 在我的文本输入上按回车键时，确定接下来要聚焦的输入。
  4. 如果该输入有效，请将其置于焦点中。

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

https://github.com/AndreasGrip/enter2tab

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

我正在使用此代码前进到下一个输入字段。我讨厌按 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>

网页内容

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

使用 e.preventDefault（）; 比返回 false 更安全。

相关文章：