【每日一练】输入框小案例

谢豪杰

已于 2022-03-06 20:14:05 修改

阅读量257

点赞数 1

分类专栏：每日一练文章标签： javascript linq 开发语言

于 2022-03-06 20:13:31 首次发布

本文链接：https://blog.csdn.net/qq_46580087/article/details/123316365

版权

每日一练专栏收录该内容

33 篇文章 16 订阅

订阅专栏

这篇博客介绍了一个HTML和JavaScript实现的示例，通过监听textarea的oninput事件，实时更新显示输入文本的长度，并限制最大输入字符数为200。用户在输入时，span标签会动态显示当前输入的字符数，帮助用户了解已输入内容与最大长度的关系。

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

效果：

输入框输入事件：获取输入框文本长度赋值给 span标签的innerText

思路：

(1)获取元素

(2)键盘输入

获取文本：area.value

获取文本长度：area.value.length

事件处理：输入框文本长度赋值给 span标签的innerText

代码：

<!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>
  <style>
    .userCount {
      color: red;
    }

    .controls {
      margin: 100px 800px;
    }
  </style>
</head>

<body>
  <div class="controls">
    <textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200"></textarea>
    <div>
      <span class="userCount">0</span>
      <span>/</span>
      <span>200</span>
    </div>
  </div>
  <script>
    //输入框输入事件：获取输入款文本长度 赋值给 span标签的innerText

    //事件类型

    // 1.鼠标事件
    //鼠标单击：onclick
    //鼠标双击：ondbclick
    //鼠标移入：ondbclick
    //鼠标移出：onmouseleave

    //2.键盘事件(针对表单输入框)
    //键盘输入：oninput

    //(1)获取元素
    let area = document.querySelector('#area')

    //(2)键盘输入
    area.oninput = function () {

      //获取文本：area.value
      console.log(area.value)

      //获取文本长度：area.value.length
      console.log(area.value.length)

      //事件处理：输入框文本长度 赋值给 span标签的innerText
      document.querySelector('.userCount').innerText = area.value.length
    }
  </script>
</body>

</html>