Javascript 如何按enter键（jQuery）提交数据？

我有一个ajaxphp注释系统，它工作得很好，但它在按下注释按钮时提交数据。我想给一些花哨的触摸和删除评论按钮，这意味着评论将提交的回车键

<form method='post' name='form' action=''>
<input type='text' name='comment' id='comment' placeholder='Write a comment....' />
<input type='button' name='submit' id='submit' value='Comment'/>
</form>

<script type="text/javascript" >
$(function() {
     $("#submit").click(function() {
        var test = $("#comment").val();
        var comment = test;
        var id = '<?php echo $id ?>';
        if (test == '') {
          alert("Please Enter Some Text");
        } else {

          $.ajax({
            type: "POST",
            url: "comment.php",
            data: {comment : comment,id : id},
            cache: false,
            success: function(html) {
              $(".coments").prepend(html);
              $("#comment").val('');
            }
          });

        }
        return false;
      });
    });
    </script>

$（函数（）{
$（“#提交”）。单击（函数（）{
var test=$（“#注释”）.val（）；
var注释=测试；
变量id=“”；
如果（测试=“”）{
警报（“请输入一些文本”）；
}否则{
$.ajax({
类型：“POST”，
url:“comment.php”，
数据：{comment:comment，id:id}，
cache:false，
成功：函数（html）{
$（“.coments”）.prepend（html）；
$（“#注释”）.val（“”）；
}
});
}
返回false；
});
});

上面的代码带有注释按钮，可以正常工作。现在我正在尝试提交有关enter键的评论：

<script type="text/javascript" >
$(function() {
     $('#comment').keyup(function(e) {
if(e.keyCode == 13) {
        var test = $("#comment").val();
        var comment = test;
        var id = '<?php echo $id ?>';
        if (test == '') {
          alert("Please Enter Some Text");
        } else {

          $.ajax({
            type: "POST",
            url: "comment.php",
            data: {comment : comment,id : id},
            cache: false,
            success: function(html) {
              $(".coments").prepend(html);
              $("#comment").val('');
            }
          });

        }
        return false;
       }
      });
    });
    </script>

$（函数（）{
$（“#注释”）.keyup（函数（e）{
如果（e.keyCode==13）{
var test=$（“#注释”）.val（）；
var注释=测试；
变量id=“”；
如果（测试=“”）{
警报（“请输入一些文本”）；
}否则{
$.ajax({
类型：“POST”，
url:“comment.php”，
数据：{comment:comment，id:id}，
cache:false，
成功：函数（html）{
$（“.coments”）.prepend（html）；
$（“#注释”）.val（“”）；
}
});
}
返回false；
}
});
});

---

此代码在按enter键时不起作用。刷新页面时，不会提交任何注释。

如果您有按钮类型submit，则在按enter键时，它将自动提交-无需JS，无需魔法

<input type='submit' name='submit' id='submit' value='Comment'/>

---

既然您不想重新加载页面，我建议您将表单元素更改为div元素。这样，您可以自己处理请求

<div>
  <input type='text' name='comment' id='comment' placeholder='Write a comment....' />
  <input type='button' name='submit' id='submit' value='Comment' />
</div>

---

这里有一个简单的提示：

按enter键提交实际上是这里的默认行为。您要做的是连接到

submit

事件，而不是试图捕获稍后将导致

submit

事件的所有内容。因此：

• 在表单元素上只听

  submit

  ，而不是

  单击

  或

  keydown

• 在

  submit

  处理程序中，调用

  event.preventDefault（）

  以防止表单提交和重新加载页面

代码：

$("form").on("submit", function(e) {
  e.preventDefault();

  var test = $("#comment").val();
  var comment = test;
  var id = '<?php echo $id ?>';
  if (test == '') {
    alert("Please Enter Some Text");
  } else {

    $.ajax({
      type: "POST",
      url: "comment.php",
      data: {comment : comment,id : id},
      cache: false,
      success: function(html) {
        $(".coments").prepend(html);
        $("#comment").val('');
      }
    });

  }
});

$（“表格”）。关于（“提交”，函数（e）{
e、 预防默认值（）；
var test=$（“#注释”）.val（）；
var注释=测试；
变量id=“”；
如果（测试=“”）{
警报（“请输入一些文本”）；
}否则{
$.ajax({
类型：“POST”，
url:“comment.php”，
数据：{comment:comment，id:id}，
cache:false，
成功：函数（html）{
$（“.coments”）.prepend（html）；
$（“#注释”）.val（“”）；
}
});
}
});

当表单中只有一个

输入[type=text]

时，浏览器将自动提交，并在输入中按enter键

要解决此问题，您只需在以下表单下添加另一个无用的

input[type=text]

：

<form method='post' name='form' action=''>
    <input type='text' name='comment' id='comment' placeholder='Write a comment....' />
    <input type="text" style="display: none;" name="nothing" value="nothing" />
    <input type='button' name='submit' id='submit' value='Comment'/>
</form>

将

input=“button”

调整为

但是如果你不想让提交按钮出现，你仍然可以用css将其隐藏起来

然后使用jQuery提交表单

        $(function() {
      $('#comment').keyup(function(e) {
        if (e.keyCode == 13) {

           var test = $("#comment").val();
  var comment = test;
  var id = '<?php echo $id ?>';
  if (test == '') {
    alert("Please Enter Some Text");
  } else {

    $.ajax({
      type: "POST",
      url: "comment.php",
      data: {comment : comment,id : id},
      cache: false,
      success: function(html) {
        $(".coments").prepend(html);
        $("#comment").val('');
      }
    });

    }
        }
      });

$（函数（）{
$（“#注释”）.keyup（函数（e）{
如果（e.keyCode==13）{
var test=$（“#注释”）.val（）；
var注释=测试；
变量id=“”；
如果（测试=“”）{
警报（“请输入一些文本”）；
}否则{
$.ajax({
类型：“POST”，
url:“comment.php”，
数据：{comment:comment，id:id}，
cache:false，
成功：函数（html）{
$（“.coments”）.prepend（html）；
$（“#注释”）.val（“”）；
}
});
}
}
});

如果您没有

标签就可以了。移除它，您就可以开始了。

更改按钮类型以提交