Web APIs 使用点击事件,输入事件,键盘响应事件,光标事件实现评论功能

最新推荐文章于 2024-05-09 10:19:41 发布

夠籦

最新推荐文章于 2024-05-09 10:19:41 发布

阅读量138

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/GW05431/article/details/127540391

版权


<!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>
        //1.目标:鼠标点击输入框 显示下面的0/200 (也就是添加焦点事件和取消焦点事件,还有输入事件input) 
        // 获取tx的dom对象
        const tx = document.querySelector('#tx')
        // 获取total dom对象
        const total = document.querySelector('.total')
        // 给tx添加焦点事件
        tx.addEventListener('focus',function(){
            total.style.opacity = 1
        })
        // 添加取消焦点
        tx.addEventListener('blur',function(){
            total.style.opacity = 0
        })
        
        // 3．目标当用户在输入框输入内容时获取输入框的内容并将长度写入到 total里面
        // 3.1给tx dom事件源注册input事件
        // 3.2在事件处理函数里面获取输入框的value属性
        // 3.3将输入的内容的长度写入到 total里面
        tx.addEventListener('input',function(){
            // trim()是去掉字符串左右的空格
            // tx.value是获取写入的内容
            const val = tx.value.trim()
            // console.log(tx.value.length);
            // 把输入框的字符串长度赋值给total
            total.innerHTML =`${val.length}/200字` 
        })

        // 2.目标:点击发布按钮,让评论发布到下面隐藏的盒子里,并把盒子显示出来

        const btn = document.querySelector('.wrapper button')
        
        const item = document.querySelector('.item')

        const text = document.querySelector('.text')

        // 给按钮添加点击事件
        btn.addEventListener('click',function(){
            // 上面定义的这里调用不了变量(局部作用域)
            const val = tx.value.trim()

            // 判断字符串长度是不是为空
            if(val.length === 0){
                alert('评论不能为空')
            }else{
                item.style.display = 'block'
            }

            // 把上方输入框的内容 传到下面评论里面
            text.innerHTML = val

            // 评论发布后,把原来的输入框内容重置
            tx.value = ''
            // 把下面统计输入内容的数字也重置
            total.innerHTML = '0/200字'
        })
        // 3.目标:按下回车键也可以让评论发布到下面隐藏的盒子里,并把盒子显示出来
        // 给tx添加键盘抬起事件
        // e是事件对象,相当于一个形参
        tx.addEventListener('keyup',function(e){

            // e.key 代表键盘按下的是哪个键,是事件对象的方法
            if(e.key === 'Enter'){
                // 相当于调用btn的点击事件
                btn.click()
            }
        })
  </script>
</body>
</html>