Question

我正在一个充满要填充的表格的网站上工作，我需要按下退出按钮时焦点移动到下一个输入控件，就像按“标签”一样。我发现当keypressed为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键。以下是我解决问题的方法：

public IHttpActionResult PutBook(Books book)
{
    if (db.Books.Any(b => b.id.Equals(book.id)))
    {
        db.Entry(book).State = EntityState.Modified;
    }
    .
    .
}

我必须做的是：

创建标签时我想要考虑的所有输入的集合。在我的例子中，它是可见的文本输入。
在有问题的输入上监听keydown事件，在我的例子中是所有文本字段输入
当我在文本输入上按下输入时，确定下一个要聚焦的输入。
如果该输入有效，请将其置于焦点。

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 文件，然后在您希望输入被视为 js 的每个对象上添加 enter2tab 类。

https://github.com/AndreasGrip/enter2tab

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

Answer 8

我相信使用e.preventDefault（）;比返回虚假更安全。

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

8 个答案: