时间戳

首页 > 解决方案 > 如何使用 jQuery 函数单击或按 Enter 与 PHP

javascript - 如何使用 jQuery 函数单击或按 Enter 与 PHP

问题描述

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

这是我的代码

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
});

我只想每当用户按“输入”按钮到任何文本框时，功能应该与处理“点击”事件相同。我怎样才能做到这一点？

标签： javascriptjquery

解决方案

这是一个如何处理文本输入中的输入的示例。在你的情况下：

$('.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">

推荐阅读