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

Question

我正在一个充满要填写的表格的网站上工作，我需要在按下转义按钮时将焦点移动到下一个输入控件，就像按下“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 中

Answer 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" />

Answer 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>

Answer 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

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

Answer 5

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

我有一个非常大的表单，用于员工调度程序应用程序，其中包含不同类型的输入字段。 某些输入字段有时隐藏，有时不隐藏。 我被要求将回车键用作 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. 在有问题的输入上侦听 keydown 事件，在我的情况下是所有文本字段输入
3. 当在我的文本输入上按下回车键时，确定接下来要聚焦的输入。
4. 如果该输入有效，请将其放在焦点上。

Answer 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>

Answer 7

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

https://github.com/AndreasGrip/enter2tab

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

Answer 8

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