javascript - 表单输入键和按钮点击做不同的事情

Question

我发现当我按回车键提交我的表单时，页面会刷新(因为我的表单没有指定操作)，但如果我点击按钮，它会执行 jQuery。

如何让 enter 键也能执行 jQuery？

这是我的代码:

<form id="signup-form">
    <input type="text" id="text-input-splash" class="text-input" placeholder="Enter your email"><button type="button" id="submit-input-splash">Sign me up</button>
</form>
<p id="validation-message"></p>
<p>100% private and free. No spam. One-click unsubscribe.</p>
<script>
    $(document).ready(function(){
        $("#submit-input-splash").click(function() {
            // import email variable
            var email = $("#text-input-splash").val();
            $.post("signup.php", {email: email}, function(data){
                $("#validation-message").text(data).addClass("error-text");
            });
        });
    });
</script>

Answer 1

为了既解决问题又改进逻辑，将按钮更改为 type="submit" 并将事件处理程序挂接到表单的 submit 事件。试试这个:

<form id="signup-form">
  <input type="text" id="text-input-splash" class="text-input" placeholder="Enter your email">
  <button type="submit" id="submit-input-splash">Sign me up</button>
</form>
<p id="validation-message"></p>
<p>100% private and free. No spam. One-click unsubscribe.</p>

$(document).ready(function(){
  $("#signup-form").submit(function(e) {
    e.preventDefault();
    var email = $("#text-input-splash").val();
    $.post("signup.php", { email: email }, function(data) {
      $("#validation-message").text(data).addClass("error-text");
    });
  });
});