使用JS来实现回车评论功能

最新推荐文章于 2024-05-01 23:17:52 发布
最新推荐文章于 2024-05-01 23:17:52 发布
阅读量3k 收藏 34
点赞数 37
分类专栏： web Javascrpt 文章标签： javascript html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64965154/article/details/130893658
版权

个人名片：
 😊作者简介：一名大一在校生，web前端开发专业
 🤡 个人主页：几何小超
 🐼座右铭：懒惰受到的惩罚不仅仅是自己的失败，还有别人的成功。
 🎅**学习目标: 坚持每一次的学习打卡，掌握更多知识！虽然都说前端已死，但是就算不靠这个吃饭，学一点东西总比啥也不知道的好

首先我们来制作b站的回车框

HTML部分

 <div class="wrapper">
    <i class="avatar"></i>
    <textarea id="tx" placeholder="发一条友善的评论" rows="2" maxlength="200"></textarea>
    <button>发布</button>
  </div>
  <div class="wrapper">
    <span class="total">0/200字</span>
  </div>
  <div class="list">
    <div class="item" style="display: none;">
      <i class="avatar"></i>
      <div class="info">
        <p class="name">清风徐来</p>
        <p class="text">大家都辛苦啦，感谢各位大大的努力，能圆满完成真是太好了[笑哭][支持]</p>
        <p class="time">2022-10-10 20:29:21</p>
      </div>
    </div>
  </div>

然后就是我们的css部分，我们要实现点击文本框使文本框进行均匀下拉的操作，可以使用focus伪类选择器,

focus是css的一个伪类选择器，可以用来选取获得焦点的元素，然后为这些获得焦点的元素设置样式。

　　只要是可以接收键盘事件或其他用户输入的元素都可以:focus选择器，大多数情况下:focus选择器都是被使用在链接和表单元素上的。

然后再下面添加运动的路径即可

.wrapper {
      min-width: 400px;
      max-width: 800px;
      display: flex;
      justify-content: flex-end;
    }

    .avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      overflow: hidden;
      background: url(./images/avatar.jpg) no-repeat center / cover;
      margin-right: 20px;
    }

    .wrapper textarea {
      outline: none;
      border-color: transparent;
      resize: none;
      background: #f5f5f5;
      border-radius: 4px;
      flex: 1;
      padding: 10px;
      transition: all 0.5s;
      height: 30px;
    }

    .wrapper textarea:focus {
      border-color: #e4e4e4;
      background: #fff;
      height: 50px;
    }

    .wrapper button {
      background: #00aeec;
      color: #fff;
      border: none;
      border-radius: 4px;
      margin-left: 10px;
      width: 70px;
      cursor: pointer;
    }

    .wrapper .total {
      margin-right: 80px;
      color: #999;
      margin-top: 5px;
      opacity: 0;
      transition: all 0.5s;
    }

    .list {
      min-width: 400px;
      max-width: 800px;
      display: flex;
    }

    .list .item {
      width: 100%;
      display: flex;
    }

    .list .item .info {
      flex: 1;
      border-bottom: 1px dashed #e4e4e4;
      padding-bottom: 10px;
    }

    .list .item p {
      margin: 0;
    }

    .list .item .name {
      color: #FB7299;
      font-size: 14px;
      font-weight: bold;
    }

    .list .item .text {
      color: #333;
      padding: 10px 0;
    }

    .list .item .time {
      color: #999;
      font-size: 12px;
    }

接下来就是我们JS部分

我来解析一下下面的思路

还是第一步我们先得获取里面的元素，只有这样才能进行接下来的操作

然后我们来写文本焦点：tx这个文本域制作一个事件，这个事件是获得焦点，让下面的0/200字的文字显示出来

tx.addEventListener('focus',function(){
      total.style.opacity=1
    })

当我们点击空白的时候得隐藏起来，同意复制上面的代码只需要改成blur就行

tx.addEventListener('blur',function(){
      total.style.opacity=0
    })

3.然后我们得做一个监听事件，检测用户输入多少字，然后让下面的0/200行来跟着用户变化


    tx.addEventListener('focus',function(){
      total.innerHTML=`${tx.value.length}/200字`
    })

第四步我们开始正式操作

实现按下回车发布评论

这里的keyup是最新版语法已经淘汰之前的keycoad，意思是键盘弹出事件，然后这里的e在keyup里面是回车的意思，所以要写在方法里面

然后我们进行判断，如果用户输入不为空就会显示打印，这边的trim是消除两边空格的意思

item.style.display='block'
            text.innerHTML=tx.value

意思是显示文本中的内容，然后最后等我们按下回车结束后，就得清空文本域，所以我们的tx的最后得为空，然后发现我们下面的没有复原，这时候我们还需要加total.innerHtml='0/200字'才能复原成之后的样子


    tx.addEventListener('keyup',function(e){
        //只有按下回车才会触发
        if(e.key === 'Enter'){
            //如果用户输入不为空就会显示打印
            if(tx.value.trim()!==''){
                item.style.display='block'
            text.innerHTML=tx.value
            }
            //等我们按下回车，结束后，清空文本域
            tx.value=''
            //按下回车就得复原
            total.innerHTML='0/200字'
        }
        
    })

这是JS源码

<script>
    const tx=document.querySelector('#tx');
    const total=document.querySelector('.total')
    const item=document.querySelector('.item');
    const text=document.querySelector('.text')
    //1.当我们文本获得焦点，让total显示出来
    tx.addEventListener('focus',function(){
      total.style.opacity=1
    })
    //1.当我们文本失去焦点，让total隐藏出来
    tx.addEventListener('blur',function(){
      total.style.opacity=0
    })
    // 3.监测用户输入
    tx.addEventListener('focus',function(){
      total.innerHTML=`${tx.value.length}/200字`
    })
    //4.按下回车发布评论
    tx.addEventListener('keyup',function(e){
        //只有按下回车才会触发
        if(e.key === 'Enter'){
            //如果用户输入不为空就会显示打印
            if(tx.value.trim()!==''){
                item.style.display='block'
            text.innerHTML=tx.value
            }
            //等我们按下回车，结束后，清空文本域
            tx.value=''
            //按下回车就得复原
            total.innerHTML='0/200字'
        }
        
    })
    
  </script>

还是老规矩，为了大家看的清除，我一边进行学习，一边写注释让我更加明白进行的操作，也是为了方便写文章

<!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">
  <title>评论回车发布</title>
  <style>
    .wrapper {
      min-width: 400px;
      max-width: 800px;
      display: flex;
      justify-content: flex-end;
    }

    .avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      overflow: hidden;
      background: url(./images/avatar.jpg) no-repeat center / cover;
      margin-right: 20px;
    }

    .wrapper textarea {
      outline: none;
      border-color: transparent;
      resize: none;
      background: #f5f5f5;
      border-radius: 4px;
      flex: 1;
      padding: 10px;
      transition: all 0.5s;
      height: 30px;
    }

    .wrapper textarea:focus {
      border-color: #e4e4e4;
      background: #fff;
      height: 50px;
    }

    .wrapper button {
      background: #00aeec;
      color: #fff;
      border: none;
      border-radius: 4px;
      margin-left: 10px;
      width: 70px;
      cursor: pointer;
    }

    .wrapper .total {
      margin-right: 80px;
      color: #999;
      margin-top: 5px;
      opacity: 0;
      transition: all 0.5s;
    }

    .list {
      min-width: 400px;
      max-width: 800px;
      display: flex;
    }

    .list .item {
      width: 100%;
      display: flex;
    }

    .list .item .info {
      flex: 1;
      border-bottom: 1px dashed #e4e4e4;
      padding-bottom: 10px;
    }

    .list .item p {
      margin: 0;
    }

    .list .item .name {
      color: #FB7299;
      font-size: 14px;
      font-weight: bold;
    }

    .list .item .text {
      color: #333;
      padding: 10px 0;
    }

    .list .item .time {
      color: #999;
      font-size: 12px;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <i class="avatar"></i>
    <textarea id="tx" placeholder="发一条友善的评论" rows="2" maxlength="200"></textarea>
    <button>发布</button>
  </div>
  <div class="wrapper">
    <span class="total">0/200字</span>
  </div>
  <div class="list">
    <div class="item" style="display: none;">
      <i class="avatar"></i>
      <div class="info">
        <p class="name">清风徐来</p>
        <p class="text">大家都辛苦啦，感谢各位大大的努力，能圆满完成真是太好了[笑哭][支持]</p>
        <p class="time">2022-10-10 20:29:21</p>
      </div>
    </div>
  </div>
  <script>
    const tx=document.querySelector('#tx');
    const total=document.querySelector('.total')
    const item=document.querySelector('.item');
    const text=document.querySelector('.text')
    //1.当我们文本获得焦点，让total显示出来
    tx.addEventListener('focus',function(){
      total.style.opacity=1
    })
    //1.当我们文本失去焦点，让total隐藏出来
    tx.addEventListener('blur',function(){
      total.style.opacity=0
    })
    // 3.监测用户输入
    tx.addEventListener('focus',function(){
      total.innerHTML=`${tx.value.length}/200字`
    })
    //4.按下回车发布评论
    tx.addEventListener('keyup',function(e){
        //只有按下回车才会触发
        if(e.key === 'Enter'){
            //如果用户输入不为空就会显示打印
            if(tx.value.trim()!==''){
                item.style.display='block'
            text.innerHTML=tx.value
            }
            //等我们按下回车，结束后，清空文本域
            tx.value=''
            //按下回车就得复原
            total.innerHTML='0/200字'
        }
        
    })
    
  </script>
</body>

</html>

谢谢大家，可能刚开始接触没多久APl,写的地方有些许错误，还是求大家提意见我来改正，哈哈哈，最后记得一键三连哦！！

几何小超
关注
  • 37
    点赞
  • 踩
  • 34
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 35
    评论
专栏目录
JavaScript 回车发布文字经典案例
weixin_47926886的博客
04-07 1683
JavaScript 回车发布文字案例 基础款
APIs学习记录-tab栏切换，回车发布评论案例（鼠标事件，焦点事件，键盘事件，环境对象）
m0_57795295的博客
04-04 319
鼠标事件，焦点事件，键盘事件，事件对象，环境对象
JS回车符
weixin_44535532的博客
05-26 3990
<br/>
Javascript：Web APIs（二）
最新发布
ma_no_lo的博客
05-01 905
介绍了事件监听的概念和事件监听的使用，基本事件类型，最后就是事件对象和环境对象
js-04-按下回车 或 发布键 发表评论
m0_64150479的博客
03-17 439
【代码】04-js-按下回车发表评论。
Web API 02
weixin_62443949的博客
03-25 292
webapi
HTML搭配JS(JavaScript)实现完全独立的评论组件,可移植,可复用,可读性强（附源码）
qq_42349895的博客
05-05 1万+
导读：如果您正在看这篇文章，想必您正在开发一个多人交互的网站，而踌躇自己写一个评论组件？纵观BAT以及各种电子商务或 博客等网站，无一不使用了评论这个功能。那么如此一般的功能，你能自己实现吗？ 本文的组成部分：探索→ 研究 → 思考 → 整理 → 实现 → 呈现 正文 ↓ 探索（主要以图片和前端源码入手） 图片之【CSDN】 ......
jQuery实现键盘回车搜索功能
10-19
总的来说，通过结合使用jQuery的事件处理和DOM操作，我们可以轻松地实现键盘回车搜索功能。这种方法提高了用户体验，让用户能够更自然地进行搜索操作。在实际开发中，你可能还需要考虑其他因素，如错误处理、异步...
javascript回车完美实现tab切换功能
10-26
主要介绍了javascript通过回车实现tab切换功能,需要的朋友可以参考下
vue中实现回车键登录功能
11-20
在Vue.js应用中，实现回车键登录功能通常涉及到对用户输入事件的监听。下面将详细解释如何在Vue中正确地实现这一功能，并解决在不同界面回车键仍然触发登录事件的问题。 首先，我们来看一个常见的错误实现： ```...
easyui-edatagrid.js实现回车键结束编辑功能的实例
01-19
easyui的可编辑表格并不具备回车事件。这让edatagrid在结束编辑时的操作很麻烦，除非你点击其他行，或者点出表格否则不会取消编辑行。 为了让结束编辑操作更简单些，我为每个单元格添加了回车事件，当回车时结束本行...
js按下回车键调用方法
qq_37800258的博客
02-23 3373
js按下回车键调用方法 下面有两种方法，要注意键盘上有两个“Enter”键，方法1对于数字区域的“Enter”键无效。 1、方法一： // mounted或created中都可 mounted: function () { // 页面加载自动获取焦点 let inputRoomId = document.getElementById("roomId"); inputRoomId.focus(); var _that=this; document.onkeydo
js中回车(按键)触发事件
qq_43173759的博客
09-06 1万+
js中按键触发事件
JS实现发帖评论
weixin_48043684的博客
04-03 574
利用JS实现有字数限制的发帖评论效果，根据时间顺序，时间较早的评论位于下方。
JavaScript回车事件
qq_60504665的博客
11-16 4452
在代码中，我们同样使用addEventListener()方法添加了一个键盘事件监听器，并在按下回车键时触发sendMessage()函数来发送消息。需要注意的是，在发送消息后，我们还需要将输入框中的文本清空，以便用户可以方便地输入下一条消息。因此，在监听器中需要通过判断keyCode属性的值来确定是否按下的是回车键，从而执行相应的操作。在监听器中，我们还需要获取到用户输入的关键字，并通过关键字来进行相应的搜索操作。这时候需要监听文本框的回车事件，并在按下回车键后触发发送消息的操作。
发布评论 (JavaScript交互特效案例 02)
PieroPc的博客
06-24 96
发布评论 (JavaScript交互特效案例 )
关于textarea中的回车符
zhangseu77的博客
02-25 1869
关于浏览器对textarea中的回车换行符的处理
Web APIs day2 | Dom事件基础 (事件监听、事件对象、环境对象、回调函数)
csyldjy的博客
06-04 384
学习目标: 掌握事件绑定处理和事件对象，完成常见网页交互目录1 事件监听（绑定）1.1 事件监听1.2 拓展阅读-事件监听版本2 事件类型3 事件对象3.1 获取事件对象3.2 事件对象常用属性4 环境对象5 回调函数综合案例目标：能够给 DOM元素添加事件监听什么是事件？ 什么是事件监听？- 语法:- 事件监听三要素：如:注意： 1. 事件类型要加引号 2. 函数是点击之后再去执行，每次 点击都会执行一次案例 京东点击关闭顶部广告需求：点击关闭之后，顶部关闭分析：①：点击的是关闭按钮②：关闭的是父盒子核
JavaScript回车事件等键盘事件
热门推荐
u012211003的博客
07-09 1万+
JavaScript回车事件等键盘事件JavaScript键盘事件键盘事件属性键盘响应顺序JavaScript 监听回车事件Keycode对照表 JavaScript键盘事件 在 JavaScript 中，当用户操作键盘时，会触发键盘事件，键盘事件主要包括下面 3 种类型： 1）keydown：在键盘上按下某个键时触发。如果按住某个键，会不断触发该事件，但是 Opera 浏览器不支持这种连续操作。该事件处理函数返回 false 时，会取消默认的动作（如输入的键盘字符，在 IE 和 Safari 浏览器下还会
在登陆界面用js实现回车键确认登陆
08-19
要在登录界面上使用 JavaScript 实现回车键确认登录，可以使用以下步骤： 1. 为登录按钮添加一个 ID 或类名，例如 "login-button"。 2. 在 JavaScript 中找到登录按钮的元素。 3. 在 JavaScript 中为页面添加一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 35
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

几何小超

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值