当光标位于表单输入元素中但仍提交时按下输入时停止页面刷新？答案

【问题标题】：stop the page refreshing when enter is pressed while cursor is in a form input element but still submit?当光标位于表单输入元素中但仍提交时按下输入时停止页面刷新？
【发布时间】：2014-09-10 23:19:38
【问题描述】：

我已经阅读了许多与此相关的文章，但它们只展示了如何防止任何事情发生，而不仅仅是页面刷新。

但是我需要它，所以当按下回车键时，文本字段是通过 ajax 请求提交而不刷新页面，就像我如何使用带有 onclick 事件的输入类型按钮一样。

iv 在下面添加了一个非常基本的模型来帮助解释我的意思。

<html>
    <head>
        <title>Demo</title>
        <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.2/jquery.min.js'></script>
    </head>
    <body>
        <form id="someForm" action="" method="post">
            <!-- 
                below is an example of the text field 
                id like to submit but without the
                page refreshing when "Enter" is pressed
            -->
            <input type="text" id="demoText"/>
            <button type="button" id="postBtn" onclick="postText()">Post</button>
        </form>
        <script>
            function postText() {
                alert("Random Function...");
            }
        </script>
    </body>
</html>

【问题讨论】：

你不能在没有页面重新加载的情况下提交表单，如果你有 ajax 功能你应该将它添加到上面的代码中？
而让它工作的方法就是捕捉表单提交事件，而不是按钮点击事件。
@adeno 谢谢你，我会调查它，我没有包括 ajax，因为它需要大量的代码（php、jquery 和 html）才能使其有意义为什么我制作了模型（它用于在线广播页面上的聊天功能，所以不能让它在每次发布/刷新时都扰乱流）
嗯，它应该是这样的 -> jsfiddle.net/1rtu37cq
@adeneo 感谢您的指点，这是一场噩梦

标签： javascript jquery html ajax

【解决方案1】：

您可以执行类似的操作来捕获控件的按键事件 - 例如输入框。

$(function() {
    $('#demoText').keypress(function (e) {
     var key = e.which;
     if(key == 13)  // enter pressed
      {
        postText();
      }
    });
});

还有更多例子here

要使用 Ajax 发布，请执行以下操作：

var postText = function() {
    var stuff = $.post("serverpage.php", function() {
        alert( "success" );
    }).fail(function() {
        alert("error");
    }
)};

【讨论】：

@Parody 没问题，很高兴为您提供帮助。

【解决方案2】：

不需要任何脚本，如果你有一个提交按钮（不是 type="button"），浏览器会为你做，并将你的函数绑定到表单的提交事件

<form id="someForm" action="" method="post" onsubmit="postText();return false">
    <input type="text" id="demoText" />
    <button type="submit" id="postBtn">Post</button>
</form>

DEMO

【讨论】：

【解决方案3】：

在这里给出的建议之后，这是我想出的，它功能齐全，所以想在此处添加它作为答案，以便其他有类似问题的人可以查看我的解决方案。

<html>
    <head>
        <title>Demo</title>
        <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
    </head>
    <body>
        <form id="form">
                <input type="text" class="input" id="chatTxt"  placeholder="Chat post..."/>
                <input type="button" id="submit" value="Submit"/>
            </form>

        <script type="text/javascript">
            $('form').keypress( function( e ) {
              var code = e.keyCode || e.which;

              if( code === 13 ) {
                e.preventDefault();
                $( "#submit" ).click();

              };
            })
            $(document).ready(function(){  
                $("#submit").click(function(){
                var ChatText = $("#chatTxt").val();

                    if(ChatText ==''){
                    alert("Chat text is empty!");      
                    }
                    else{

                    $.post("demo.php",{ ChatText1: ChatText },
                        function(data) {
                        alert(data);
                        $('#form')[0].reset();
                        });

                    }
                });
            });
        </script>
    </body>
</html>

【讨论】：