Question

我想停止用户点击输入时提交表单。

这适用于那个

class Background extends JPanel {

    Image backgroundPic;

    public Background() {
        ImageIcon backgroundIcon=new ImageIcon("E:/eclipse/EL/backgroundPicture.jpg");
        backgroundPic=backgroundIcon.getImage();
    }

    @Override
    public void paintComponent(Graphics g) {
        super.paintComponent(g);
        Graphics2D g2D=(Graphics2D) g;
        g2D.drawImage(backgroundPic,10,10,this);
    }
}

但是我在页面上有其他按钮，当我选择并单击Enter以获取其功能时，这将通过此功能被阻止。

按钮如下：

$(document).ready(function() {
        $(window).keydown(function(event){
            if(event.keyCode == 13) {
                event.preventDefault();
                return false;
            }
        });
    });

我只想在选择提交按钮时按下后提交表单。

<input type='button' tabindex="29" value='Add Additional Drug' id='addButton'>

我该怎么做？

修改

我在附加的Stackoverflow中看到了答案，但如果他们已经完成了所有字段，他允许人们按Enter键：

我不希望用户按Enter键，除非他们选择了一个按钮（即无法按Enter键，按Tab键，按下Enter键，这将触发按钮执行其功能而不提交表单。

表单以Tabbing为基础，因此用户将标记所有字段。

Answer 1

将keydown事件绑定到整个文档会影响页面上的所有输入和表单，您的页面中可能会有多个输入和表单，因此会弄乱整个页面逻辑。

您可以将其绑定到特定表单：

$("#myForm input").not("#addButton").keydown(function(event) {
    if (event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
});

<强>演示：

＆＃13;

$("#myForm input").not("#addButton").keydown(function(event) {
  if (event.keyCode == 13) {
    event.preventDefault();
    return false;
  }
});

＆＃13;

form input {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form action="" id="myForm">
  <input type="text" name="input1" />
  <input type="text" name="input2" />
  <input type="text" name="input3" />
  <input type="submit" name="submit" value="Submit" tabindex="3" class="submit" />
</form>

＆＃13;

注意：

我在这里使用#myForm作为测试id来定位中的特定表单页面，您只需要使用您的表单ID。

在.not("#addButton")中使用jQuery .not()方法不会影响id="addButton"按钮。

Answer 2

首先，请记住，您尝试的内容会破坏UI可访问性标准。

考虑到这一点，您需要停止使用真正的“提交”按钮并使用模拟提交按钮的常规按钮。

接下来，您需要通过代码手动触发所有非提交按钮按钮的click事件。

这是一个有效的例子。有关详细信息，请参阅注释：

$(document).ready(function() {
  $(window).on("keydown", function(event){
    // Check to see if ENTER was pressed and the submit button was active or not
    if(event.keyCode === 13 && event.target === document.getElementById("btnSubmit")) {
      // It was, so submit the form
      document.querySelector("form").submit();

    } else if(event.keyCode === 13 && event.target !== document.getElementById("btnSubmit") ){
      // ENTER was pressed, but not while the submit button was active
       alert("Enter pressed on something other than submit button.");
                
      // Cancel form's submit event
      event.preventDefault();
                
      //  Invoke click event of target so that non-form submit behaviors will work
      event.target.click();
     
      // Tell JQuery to cancel the event
      return false;
    }
  });
        
  // Non-submit button event handling
  $("#btnOther").on("click", function(){
    alert("Other button clicked!");
  });
        
  // Set up your "regular" button to act as a "submit" button when it is clicked
  $("#btnSubmit").on("click", function(){
 	// Submit the form
    document.querySelector("form").submit();     
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action=# method=post>
  <input name=test>
  <input type=button id="btnOther" value="Other Button">
  <input type=button id="btnSubmit" value=Submit>

</form>

仅在单击提交按钮时提交表单并阻止“输入”提交表单

2 个答案: