javascript - 难以使用回车键作为制表符

Question

我正在创建表单，需要使用“enter key press as tab key”来聚焦下一个文本字段，在完成表单后，应该按下按钮。

除了按钮按下部分，我的代码可以正常工作，它对按钮没有任何作用。

提前致谢...

$(window).load(function(){
      document.getElementById("Editbox1").focus();
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;
}


    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="wb_Form1" style="position:absolute;background-color:#F7F9FC;left:307px;top:153px;width:377px;height:256px;z-index:5">
<form name="Form1" method="post" action="#" enctype="text/plain" id="Form1">
<input type="text" id="Editbox1" style="position:absolute;left:195px;top:65px;width:170px;height:18px;border:1px #C0C0C0 solid;font-family:Courier New;font-size:13px;z-index:0" name="Editbox1" value="">
<input type="text" id="Editbox2" style="position:absolute;left:196px;top:98px;width:171px;height:18px;border:1px #C0C0C0 solid;font-family:Courier New;font-size:13px;z-index:1" name="Editbox2" value="">
<input type="submit" id="Button1" name="" value="Submit" style="position:absolute;left:198px;top:134px;width:96px;height:25px;font-family:Arial;font-size:13px;z-index:2">
<img src="images/img0001.gif" id="Text1" alt="" border="0" style="position:absolute;left:65px;top:72px;width:113px;height:16px;z-index:3">
<img src="images/img0002.gif" id="Text2" alt="" border="0" style="position:absolute;left:65px;top:102px;width:113px;height:16px;z-index:4">
</form>
</div>

Answer 1

你需要通过它的id来区分按钮点击，你有两种方法

首先，您可以使用输入的长度绑定(bind)输入函数，获取最后一个 ID 并区分它。

$(window).load(function() {
  document.getElementById("Editbox1").focus();

  function tab(e) {
    if (e.which == 13) {
      console.log('test');
      e.target.nextSibling.nextSibling.focus();
      e.preventDefault();
    }
  }
  function submitForm(e) {
    if (e.which == 13) {     
      document.getElementByName("Form1").submit();
    }
  }
  var inputs = document.getElementsByTagName('input');
  for (var x = 0; x < inputs.length; x++) {
    var input = inputs[x];   
    if (x === (inputs.length - 1)) {    
      input.onkeypress = submitForm;
    } else {
      input.onkeypress = tab;
    }
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="wb_Form1" style="position:absolute;background-color:#F7F9FC;left:307px;top:153px;width:377px;height:256px;z-index:5">
  <form name="Form1" method="post" action="#" enctype="text/plain" id="Form1">
    <input type="text" id="Editbox1" style="position:absolute;left:195px;top:65px;width:170px;height:18px;border:1px #C0C0C0 solid;font-family:Courier New;font-size:13px;z-index:0" name="Editbox1" value="">
    <input type="text" id="Editbox2" style="position:absolute;left:196px;top:98px;width:171px;height:18px;border:1px #C0C0C0 solid;font-family:Courier New;font-size:13px;z-index:1" name="Editbox2" value="">
    <input type="text" id="Editbox3" style="position:absolute;width:171px;height:18px;border:1px #C0C0C0 solid;font-family:Courier New;font-size:13px;z-index:1" name="Editbox2" value="">
    <input type="submit" id="Button1" name="" value="Submit" style="position:absolute;left:198px;top:134px;width:96px;height:25px;font-family:Arial;font-size:13px;z-index:2">
    <img src="images/img0001.gif" id="Text1" alt="" border="0" style="position:absolute;left:65px;top:72px;width:113px;height:16px;z-index:3">
    <img src="images/img0002.gif" id="Text2" alt="" border="0" style="position:absolute;left:65px;top:102px;width:113px;height:16px;z-index:4">
  </form>
</div>

第二个你可以在按下回车时使用按钮 id 来区分它。

 if (e.which == 13 && e.target.id !== "Button1") {

$(window).load(function() {
  document.getElementById("Editbox1").focus();

  function tab(e) {
    if (e.which == 13 && e.target.id !== "Button1") {
      console.log('test');
      e.target.nextSibling.nextSibling.focus();
      e.preventDefault();
    }else{
      alert('submit')
    }
  }

  var inputs = document.getElementsByTagName('input');
  for (var x = 0; x < inputs.length; x++) {
    var input = inputs[x];
    input.onkeypress = tab;
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="wb_Form1" style="position:absolute;background-color:#F7F9FC;left:307px;top:153px;width:377px;height:256px;z-index:5">
  <form name="Form1" method="post" action="#" enctype="text/plain" id="Form1">
    <input type="text" id="Editbox1" style="position:absolute;left:195px;top:65px;width:170px;height:18px;border:1px #C0C0C0 solid;font-family:Courier New;font-size:13px;z-index:0" name="Editbox1" value="">
    <input type="text" id="Editbox2" style="position:absolute;left:196px;top:98px;width:171px;height:18px;border:1px #C0C0C0 solid;font-family:Courier New;font-size:13px;z-index:1" name="Editbox2" value="">
    <input type="text" id="Editbox3" style="position:absolute;width:171px;height:18px;border:1px #C0C0C0 solid;font-family:Courier New;font-size:13px;z-index:1" name="Editbox2" value="">
    <input type="submit" id="Button1" name="" value="Submit" style="position:absolute;left:198px;top:134px;width:96px;height:25px;font-family:Arial;font-size:13px;z-index:2">
    <img src="images/img0001.gif" id="Text1" alt="" border="0" style="position:absolute;left:65px;top:72px;width:113px;height:16px;z-index:3">
    <img src="images/img0002.gif" id="Text2" alt="" border="0" style="position:absolute;left:65px;top:102px;width:113px;height:16px;z-index:4">
  </form>
</div>