如何使用 jQuery 函数单击或按 Enter 与 PHP答案

【问题标题】：How to use jQuery function with click OR press enter with PHP如何使用 jQuery 函数单击或按 Enter 与 PHP
【发布时间】：2021-12-23 16:26:38
【问题描述】：

我有两个不同的文本框（来自循环）。现在数据正在通过“点击”事件提交。但现在我也想在“输入”按钮之后“发布”数据（例如 facebook cmets）。我该怎么做？

这是我的代码

foreach ...
{ 
    <!-- First text box -->
    <input type="text" placeholder="Post your comment here" id="txt'.$FeedId.'" class="feed_in_input" name="">
    
    <img class="feed_reply_smiley2" data-coin='.$CoinId.' data-max2='.$postID.' data-min2='.$postID.' data-stat='.$PostStatus.' id="button'.$FeedId.'" src="'.base_url().'/assets/social/images/feed_reply_smiley.svg" alt="img">
     
    <!-- Second text box -->
    <input type="text" placeholder="Reply to '.$UserName.'" id="txt'.$FeedId.'" class="feed_in_input" name="">
     
    <img class="feed_reply_smiley" id="button'.$FeedId.'" src="'.base_url().'/assets/social/images/feed_reply_smiley.svg" alt="img">
}

这是我的脚本

$('.feed_reply_smiley2').unbind().click(function(e) {   
    //our code here
});

$('.feed_reply_smiley').unbind().click(function(e) {    
    //our code here
});

我只想每当用户按下“输入”按钮到任何文本框时，函数应该像处理“点击”事件一样执行。我该怎么做？

【问题讨论】：

这能回答你的问题吗？ Detect the Enter key in a text input field
@bossxzero: 不，因为我被 php 中的循环卡住了

标签： javascript jquery

【解决方案1】：

在表单标签内添加所有内容，之后您可以检测表单提交

<script>
function myfunction(e) {
    e.preventDefault();
    alert("yes");
}
</script>
<form method="post" onsubmit="myfunction(event)">
    <input name="something" />
    <input type="submit" />
</form>

preventDefault 会阻止提交数据的默认行为

【讨论】：

【解决方案2】：

Here's an example 了解如何处理文本输入中的输入。在你的情况下：

$('.feed_in_input').on('keyup', function(event) {
    if (event.keyCode == 13) {
        // 13 = Enter Key
        alert('enter key pressed.');
    }
});

接下来，如果您的目标是从多个不同的事件中触发相同的代码，第一步是将该代码设置为可调用函数。例如：

function handleClickAndEnter() {
    // our code here
    alert('Action happened!');
}

现在您可以从每个处理程序中调用该函数，例如：

$('.feed_reply_smiley').on('click', handleClickAndEnter);

$('.feed_reply_smiley2').on('click', handleClickAndEnter);

$('.feed_in_input').on('keyup', function(event) {
    if (event.keyCode == 13) {
        // 13 = Enter Key
        handleClickAndEnter();
    }
});

如果需要，您还可以将前 2 个处理程序合并为一个：

$('.feed_reply_smiley, .feed_reply_smiley2').on('click', handleClickAndEnter);

如果您的代码需要确定触发了哪个事件，则需要更进一步。单击“运行代码片段”以查看这一切是否正常。

$('.feed_in_input').on('keyup', function(event) {
    if (event.keyCode == 13) {
        // Pass the event along to the handler
        handleClickAndEnter(event);
    }
});

$('.feed_reply_smiley, .feed_reply_smiley2').on('click', function(event) {
    // Pass the event along to the handler
    handleClickAndEnter(event)
});

// Now accept the event as a parameter
function handleClickAndEnter(event) {
    // our code here
    if (event.target.nodeName == "INPUT") {
        alert('Someone hit enter!');
    } else if (event.target.nodeName == "IMG") {
        alert('Someone clicked an image!');
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Input 1: <input class="feed_in_input" type="text">
<br><img src="https://via.placeholder.com/350x65" class="feed_reply_smiley">

<br><br>Input 2:<input class="feed_in_input" type="text">
<br><img src="https://via.placeholder.com/350x65" class="feed_reply_smiley2">

【讨论】：