web API-事件基础-微博案例-字数统计

最新推荐文章于 2024-11-03 16:40:52 发布

Q _Q

最新推荐文章于 2024-11-03 16:40:52 发布

阅读量65

点赞数

文章标签：前端 html css css3 javascript

本文链接：https://blog.csdn.net/weixin_54021642/article/details/131602208

版权

该代码示例展示了一个HTML页面，包含一个textarea用于用户输入，以及一个字数统计区域。使用JavaScript监听textarea的input事件，实时更新字数计数。当用户在textarea中输入文字时，显示的字数会动态更新并在限制200字以内。

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

代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <link rel="stylesheet" href="css/weibo.css" />
</head>

<body>
  <div class="w">
    <div class="controls">
      <img src="images/tip.png" alt="" /><br />
      <textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200"></textarea>
      <div>
        <span class="useCount">0</span>
        <span>/</span>
        <span>200</span>
        <button id="send">发布</button>
      </div>
    </div>
    <div class="contentList">
      <ul></ul>
    </div>
  </div>

  <script>
    // 查找元素
    let area = document.querySelector('#area')
    let useCount = document.querySelector('.useCount')

    // 添加 input 输入事件监听 
    area.addEventListener('input', function () {
      // console.log('input ok')
      // console.log(area.value.length)
      
      // 获取文本框值(字符串)长度  .length
      let len = area.value.length
      // 把字符长度显示到盒子中
      useCount.innerHTML = len
    })
  </script>
</body>

</html>

效果图：