如何使用javascript强制“enter键”充当“tab键”?

yzxexxkh  于 2023-05-12  发布在  Java
关注(0)|答案(8)|浏览(160)

我在一个网站上工作,是充满了形式要填写,我它的要求,当退出按钮按下焦点移动到下一个输入控件,就像按下“标签”做。我发现代码移动焦点时,按键是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

gopyfrb3

gopyfrb31#

这将处理多个输入字段。
以下是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" />
wqnecbli

wqnecbli2#

处理按键并返回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>
mnowg1ta

mnowg1ta3#

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

1bqhqjot

1bqhqjot4#

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

ha5z0ras5#

虽然帖子很旧了,但我希望我的回答能帮助到需要帮助的人。我有个类似的情况:
我有一个非常大的表单,用于员工调度程序应用程序,其中有不同类型的输入字段。某些输入字段有时会隐藏,而其他时候则不会。我被要求使回车键的行为作为标签键,使用户的形式可以使用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.创建一个所有输入的集合,我想考虑时,制表符。在我的例子中,它是可见的文本输入。
1.在有问题的输入上监听keydown事件,在我的例子中是所有文本字段输入
1.当在我的文本输入上按下回车键时,确定下一个要聚焦的输入。
1.如果输入是有效的,将其聚焦。

wixjitnu

wixjitnu6#

这里有一个简单的解决方案。基本上,您包括enter2tab.js文件,然后在您希望enter被视为选项卡的每个对象上添加enter2tab类。
https://github.com/AndreasGrip/enter2tab
显然,您可以查看代码以了解它的作用以及如何..

7nbnzgx9

7nbnzgx97#

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

krcsximq8#

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

相关问题