js实现点击评论进行显示回复框

最新推荐文章于 2024-06-16 00:47:57 发布
最新推荐文章于 2024-06-16 00:47:57 发布
阅读量5.9k 收藏 32
点赞数 4
文章标签： javascript java python ViewUI
这篇博客介绍了一个在用户点击评论时自动显示回复框的功能实现。通过一段简单的HTML和JavaScript代码，可以达到预期效果，为用户提供更友好的交互体验。
摘要由CSDN通过智能技术生成

有人在群里问如何在留言评论那里点击回复按钮，下面就自动显示一个回复框，他想要的效果如图：

于是我随意的写了一段HTML，代码如下：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://cdn.bootcss.co
最低0.47元/天 解锁文章
weixin_33919950
关注
  • 4
    点赞
  • 踩
  • 32
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
原生js实现回复评论功能
10-20
在本文中，我们将探讨如何使用原生JavaScript实现一个基本的评论回复功能。这个功能包括删除评论、显示或隐藏点赞数量、添加新的回复评论、处理回复内的点赞以及回复或删除操作。我们将通过分析给出的代码片段来理解...
js实现评论框展开和隐藏
qq_36354609的博客
08-25 2922
1.效果图如下所示， 点击评论会在对应的评论区域展开评论输入框，点击取消会取消对应的评论输入框 2.html代码：需要引入jquery.js div class="nr-comment"> div class="nr-comment-con"> div class="nr-comment-nav"> div class="comment-number"> span
JS特效第43弹：jQuery评论插件可回复评论代码
weixin_38343072的博客
12-24 442
经典的JS特效动画效果，效果实现的全部代码已提供，可供学习借鉴
【web前端开发网页设计】一步步实现：HTML + CSS + JavaScript 完整无限嵌套评论（超实用）轻松搞定贴吧嵌套评论功能：完整源代码与详细教程（新手必看）轻松入门前端开发新手入门超简单
最新发布
南北极之间
06-16 580
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。
原生js实现发布评论功能
在热爱技术的路上一直前行。
02-27 1382
代码： 效果： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&g
js实现简易的评论留言功能
yang68668的博客
11-05 3395
<style> * { margin: 0; padding: 0; } li { list-style: none; width: 500px; height: 30px; line-height: 30px; background-color: cadetbl.
使用JS来实现回车评论功能
weixin_64965154的博客
05-26 3044
意思是显示文本中的内容，然后最后等我们按下回车结束后，就得清空文本域，所以我们的tx的最后得为空，然后发现我们下面的没有复原，这时候我们还需要加total.innerHtml='0/200字'才能复原成之后的样子。这里的keyup是最新版语法已经淘汰之前的keycoad，意思是键盘弹出事件，然后这里的e在keyup里面是回车的意思，所以要写在方法里面。然后我们来写文本焦点：tx这个文本域制作一个事件，这个事件是获得焦点，让下面的0/200字的文字显示出来。//等我们按下回车，结束后，清空文本域。
Vue.js实现文章评论和回复评论功能
10-19
例如，当用户点击某个评论进行回复时，父组件会更新`type`和`name`属性，告知`<comment-textarea>`组件当前正在回复哪个评论。 总结起来，Vue.js实现文章评论和回复评论功能的关键点包括： 1. 使用组件化设计，将...
基于JavaScript实现评论框展开和隐藏功能
10-19
要实现基于JavaScript的评论框展开和隐藏功能，主要可以通过操作DOM元素的显示和隐藏属性来达成，结合一些前端知识如HTML、CSS和JavaScript的知识点。 1. HTML结构设计： 在HTML中，我们需要为评论框设计合适的...
js+html实现回复评论功能.zip
11-11
这种功能常见于社交媒体、博客和其他在线交互平台，让用户能够对原始评论进行回应，促进用户之间的交流。 首先，HTML是构建网页内容的基础，它定义了页面的结构。在这个项目中，HTML将用于创建评论区域的基本框架。...
php无限级分类实现评论及回复功能
10-17
在`comments.js`中，我们需要监听点击事件，处理回复按钮的显示/隐藏，以及提交评论的Ajax请求。此外，还需要更新评论总数的显示。 总结来说，实现PHP无限级分类评论及回复功能主要涉及以下步骤： 1. 设计评论数据...
评论回复功能demo
03-27
通过JAVA结合js技术实现发表文章的评论回复功能，对评论和回复的功能可以删除，显示点赞数量。
js实现类似评论的发表和编辑
qige1024的博客
06-15 1407
思路： 1.有一个textarea框，宽600高400，边框是1像素实线黑色，textarea框不允许用户随意缩放 2.
HTML搭配JS(JavaScript)实现完全独立的评论组件,可移植,可复用,可读性强（附源码）
热门推荐
qq_42349895的博客
05-05 1万+
导读：如果您正在看这篇文章，想必您正在开发一个多人交互的网站，而踌躇自己写一个评论组件？纵观BAT以及各种电子商务或 博客等网站，无一不使用了评论这个功能。那么如此一般的功能，你能自己实现吗？ 本文的组成部分：探索→ 研究 → 思考 → 整理 → 实现 → 呈现 正文 ↓ 探索（主要以图片和前端源码入手） 图片之【CSDN】 ......
Javascript：Web APIs（二）
ma_no_lo的博客
05-01 918
介绍了事件监听的概念和事件监听的使用，基本事件类型，最后就是事件对象和环境对象
原生JS实现特效留言框
越陌度阡
08-13 734
给大家分享一个用原生JS实现的特效留言框，效果如下： 实现代码如下，欢迎大家复制粘贴。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS.........
JS实现简易留言板功能
qq_48954625的博客
12-26 6858
JS实现简易留言板功能
用HTML,CSS,JS,PHP,SQL实现网页点击评论时显示我的评论，点击回复时显示我收到的回复
06-09
好的，以下是一种基本的实现方式： 1. 创建 HTML 页面，包括评论区域和回复区域，使用不同的 ID 或类名来标识它们。 ``` <div id="comments"> <!-- 评论区域 --> </div> <div id="replies"> <!-- 回复区域 --> </div> ``` 2. 使用 CSS 样式设计评论区域和回复区域的外观。 3. 在 JavaScript 中编写代码，监听用户的点击事件。当用户点击评论区域时，显示输入框并获取用户的评论内容。当用户点击回复按钮时，显示回复框并获取相关信息。 ``` // 显示评论输入框 document.getElementById("comments").addEventListener("click", function() { var commentInput = document.createElement("textarea"); commentInput.placeholder = "请输入您的评论..."; document.getElementById("comments").appendChild(commentInput); }); // 显示回复输入框 document.getElementById("replies").addEventListener("click", function(event) { var replyInput = document.createElement("textarea"); replyInput.placeholder = "回复 " + event.target.dataset.user + ":"; document.getElementById("replies").appendChild(replyInput); }); ``` 4. 在 PHP 中编写代码，处理用户提交的评论和回复信息。将其存储到数据库中。 ``` // 连接数据库 $conn = mysqli_connect($servername, $username, $password, $dbname); // 提交评论 if ($_POST["comment"]) { $comment = mysqli_real_escape_string($conn, $_POST["comment"]); $sql = "INSERT INTO comments (comment) VALUES ('" . $comment . "')"; mysqli_query($conn, $sql); } // 提交回复 if ($_POST["reply"]) { $reply = mysqli_real_escape_string($conn, $_POST["reply"]); $user = mysqli_real_escape_string($conn, $_POST["user"]); $sql = "INSERT INTO replies (user, reply) VALUES ('" . $user . "', '" . $reply . "')"; mysqli_query($conn, $sql); } ``` 5. 在 PHP 中编写代码，从数据库中检索评论和回复信息，并返回给用户。 ``` // 获取评论 $sql = "SELECT * FROM comments"; $result = mysqli_query($conn, $sql); while ($row = mysqli_fetch_assoc($result)) { echo $row["comment"]; } // 获取回复 $sql = "SELECT * FROM replies"; $result = mysqli_query($conn, $sql); while ($row = mysqli_fetch_assoc($result)) { echo "<div data-user='" . $row["user"] . "'>" . $row["reply"] . "</div>"; } ``` 注意，这只是一个基本的实现方式，您需要根据实际需求进行调整和修改。同时，还需要对输入的数据进行验证和过滤，以防止 SQL 注入等攻击。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值