JQuery 和 PHP 按回车键处理答案

【问题标题】：JQuery and PHP pressing enter to processJQuery 和 PHP 按回车键处理
【发布时间】：2019-11-22 07:46:13
【问题描述】：

我有以下两个文件request.php 和response.php。我曾经使用按钮发送请求

    <input type="button" value="Request message" onclick="post()"/>

但现在我正在考虑只使用“Enter”(13) 键。

代码有效，但它仅显示几毫秒的结果。理论上 keydown 功能正在工作并从响应中获取结果，bt 我不知道为什么只是很短的时间。

有什么建议吗？

request.php

<script type="text/javascript">

function post(){
$("#message").keydown(function (e) {
    if (e.keyCode == 13) {
    var message=document.getElementById("message").value;
    $.post('response.php',{postmessage:message},
    function(data){
    var result = $('#post_message').html(data);
    console
return result; });
    }
});
}
</script>

<form>
Enter Message:<input type="text" id="message" name="message" onclick="post()"/><br/>
</form>
<div id="post_message"></div>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

response.php

<?php
 function returnString() {
    $post_msg = $_POST['postmessage'];
    echo "Message entered ->", $post_msg ," <- here";
}
returnString();
?>

【问题讨论】：

消息在短时间内反映？
您不必编写onclick 函数，因为您已经使用if 语句定义了keydown 函数。
“但是它只显示几毫秒的结果” - 这是因为您的表单会以“正常”方式自动提交，因为您没有采取任何措施来防止这种情况发生.您应该在此处将提交处理程序绑定到您的表单，而不是尝试列出键盘事件 - 当光标在该字段中时按下 Enter 时，浏览器将自动提交仅包含单个文本字段的表单。然后以通常的方式阻止默认的提交操作（如果你不知道怎么做，去研究一下。）
另外，您当前的设置一开始就没有什么意义，因为每次点击该字段时，您都会添加一个新的额外 keydown 处理程序。
@misorude 你是对的，简单的提交比听键盘更有意义。这只是代码的一部分，这将在更大的页面中使用。感谢您的见解！

标签： javascript php jquery keydown enter

【解决方案1】：

当您按 Enter 时，表单已提交。只需添加 e.preventDefault()，这样：

function post(){
$("#message").keydown(function (e) {

    e.preventDefault();

    if (e.keyCode == 13) {
    var message=document.getElementById("message").value;
    $.post('response.php',{postmessage:message},
    function(data){
    var result = $('#post_message').html(data);
    console
return result; });
    }
});
}

【讨论】：

谢谢。是的，我之前尝试过 prevent 方法，但它确实锁定了整个消息字段，您无法输入任何内容。

【解决方案2】：

您正在尝试模仿默认情况下已经存在的行为使用只有一个输入的表单。

因此您的表单正在提交并重新加载页面。

您无需在<input> 上收听关键事件。只需监听form 的submit 事件并阻止默认提交过程

$('form').submit(function(e){
    e.preventDefault();    
    var msg = $('#message').val();

    mockPost(msg).then(function(res){        
      $('#post_message').append('<p>' + res + '<p>')
    });    

})


function mockPost(v){
   return new Promise(function(resolve){
        setTimeout(function(){
          resolve('Message= ' + v)
        }, 200)
   })
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
Enter Message:<input type="text" id="message" name="message"/><br/>
</form>
<div id="post_message"></div>

【讨论】：

谢谢那更清楚了。在 sn-p 上看起来不错，但由于某种原因，它无法在我的浏览器 Opera 和 firefox for linux 上运行。
如果代码在 head 中，请确保使用 document.ready。这适用于任何浏览器，即使是 12 岁的浏览器
那是缺失的部分。效果很好。虽然我不需要它，但我喜欢输入的文本在不刷新页面的情况下被“记录”。

【解决方案3】：

感谢您的建议。所以我最终得到了这段代码，正如@misorude 所建议的那样。只需添加一个 preventDefault 并在表单中使用提交。我在提交时添加了一个“onclick”，以防用户想通过点击按钮提交。 response.php 保持不变。

request.php

<script type="text/javascript">

function post(){
    $('form').submit(function(e){
    e.preventDefault();    
    var message = $('#message').val();
    $.post('response.php',{postmessage:message},
    function(data){
    var result = $('#post_message').html(data);
    console
    return result; });
    });
}
</script>

<form>

Enter Message:<input type="text" id="message" name="message"/><br/>
<input type="submit" value="Submit" onclick="post()">
</form>
<div id="post_message"></div>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

【讨论】：

这将在每次点击输入时添加一个新的提交事件监听器。询问这样做的问题