首页评论回车发布案例前端代码

评论回车发布案例前端代码

时间: 2024-07-16 13:00:37 浏览: 64

在前端开发中，实现评论回车发布功能通常会涉及到文本输入框监听键盘事件和提交处理。这是一个基本的HTML、JavaScript和可能的jQuery示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Comment Publish</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <div id="comments"> <textarea id="comment-input" placeholder="Type your comment... (Press Enter to post)"></textarea> <button id="publish-button">Post Comment</button> </div> <script> $(document).ready(function() { // 监听textarea的keyup事件 $('#comment-input').on('keyup', function(event) { if (event.keyCode === 13 && !event.shiftKey) { // 阻止Enter键的默认行为（如提交表单） event.preventDefault(); // 阻止回车发送 // 获取textarea的内容 const comment = $(this).val(); // 发送评论到服务器（这里只是一个模拟，实际应异步处理） sendCommentToServer(comment); // 清空textarea $(this).val(''); } }); // 假设sendCommentToServer是一个异步函数 function sendCommentToServer(comment) { $.ajax({ url: 'your-api-url', // 替换为实际的API地址 type: 'POST', data: { comment: comment }, success: function(response) { console.log('Comment posted:', response); // 在这里添加实际的评论显示逻辑 }, error: function(xhr, status, error) { console.error('Error posting comment:', error); } }); } }); </script> </body> </html> ```

阅读全文