回车或按钮事件评论

甜豆瓣

已于 2024-02-11 14:21:37 修改

阅读量536

点赞数 17

文章标签：前端 javascript html

于 2024-02-11 14:21:25 首次发布

本文链接：https://blog.csdn.net/2202_75496263/article/details/136095627

版权

本文介绍了如何使用JavaScript在网页上创建一个具有字符限制的textarea输入框，用户输入时实时显示剩余字符数，以及添加了按钮点击和回车事件，当用户提交评论时隐藏头像和评论区，同时保持良好的用户体验和样式设计。

摘要由CSDN通过智能技术生成

练习到这里，分享出来，虽然还有许多不足。

回车按钮评论事件

1.文档内容

textarea 设置只读性，限制最大字数

 <div class="bigBox">
    <!-- maxlengt 最大字数限制 -->
    <textarea name="" id="text" placeholder="发一条评论吧~" rows="" maxlength="200"></textarea>

    <button class="btn">发布</button>

  </div>
  <div class="box1">
    <p>0/200字</p>


    <br>
    <div class="box2">
      <img src="./新的.png" alt="" srcset="" class="img1" style="width: 150px; height: 150px; ">
      <!-- 设置只读性 -->
      <textarea class="box3" readonly></textarea>

    </div>

  </div>

2.JS部分

  <script>
    // button按钮
    const btn = document.querySelector('.btn')
    // 发布评论区
    const textarea = document.querySelector('#text')
    // 字数
    const p1 = document.querySelector('.box1 p')
    //  评论区
    let box3 = document.querySelector('.box3')
    // 头像
    let img1 = document.querySelector('.img1')


    // 获取焦点显示字数
    textarea.addEventListener('focus', function () {
      p1.style.display = 'block'

    })
    // 失去焦点
    textarea.addEventListener('blur', function () {
      p1.style.display = 'none'
    })

    // 点击按钮
    btn.addEventListener('click', function () {
      console.log(textarea.value.length)
      // 评论字数
      let if1 = textarea.value.length = '0'
      let if2 = textarea.value.length != '0'

      // 如果字数为0，隐藏头像和评论区
      if (if1) {
        box3.style.opacity = '0'
        img1.style.opacity = '0'
      }
      // 字数不为0，显示评论区
      if (if2) {
        box3.style.opacity = '1'
        // 评论区文本
        box3.innerHTML = textarea.value
        img1.style.opacity = '1'
        // 发布评论区清空
        textarea.value = ''

      }



    })

    // 按下回车键与点击按钮事件相同
    textarea.addEventListener('keyup', function (e) {
      if (e.key === 'Enter') {
        e.preventDefault()
        console.log(e.key)
        let if1 = textarea.value.length = '0'
        let if2 = textarea.value.length != '0'

        if (if1) {
          box3.style.opacity = '0'
          img1.style.opacity = '0'
        }
        if (if2) {
          box3.style.opacity = '1'
          box3.innerHTML = textarea.value
          img1.style.opacity = '1'
          textarea.value = ''

        }

      }

    })

    // 监听输入文字
    textarea.addEventListener('input', function () {

      let num = textarea.value.length
      p1.innerHTML = `${num}/200字`
    })
  </script>

3.样式

过渡效果，textarea去掉下拉条，禁止调整尺寸，移除聚焦样式

<style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    .bigBox {
      display: flex;

    }

    [id=text] {
      padding: 10px;
      margin-top: 20px;
      margin-left: 150px;
      width: 300px;
      height: 150px;
      padding-bottom: 70px;
      border: 2px rgb(149, 188, 208) solid;
      /*过渡效果 */
      transition: all .3s;
      border-radius: 10px;
      font-size: 15px;
      resize: none;
      background-color: rgb(236, 245, 252);
      /* 去掉下拉条 */
      overflow: hidden;




    }

    [id=text]:focus {
      /*  移除默认聚焦样式*/
      outline: none;
      outline-color: rgb(134, 212, 248);
      width: 400px;
      background-color: transparent;



    }

    button {
      color: white;
      margin: 75px 20px 0px;
      width: 50px;
      height: 50px;
      border-style: none;
      border-radius: 10px;
      cursor: pointer;
      background-color: rgb(134, 212, 248);
    }

    button:hover {
      background-color: rgb(170, 214, 236);
    }

    .box1 p {
      margin-left: 500px;
      font-size: 13px;
      display: none;
    }

    .box2 {
      display: flex;
      padding-top: 50px;
    }

    .box3 {
      margin-left: 0;
      width: 300px;
      height: 150px;
      border: 2px rgb(136, 213, 255) solid;
      border-radius: 10px;
      font-size: 15px;
      opacity: 0;
      /* 禁止调整尺寸 */
      resize: none;
      /* 移除聚焦样式 */
      outline: none;
      margin-top: 40px;
      padding: 10px;
      /* 去掉下拉条 */
      overflow: hidden;
    }

    .img1 {
      opacity: 0;
    }
  </style>

这是自用代码图片