主题列表：juejin, github, html,textarea,前端，h5

贡献主题：github.com/xitu/juejin…

theme: juejin highlight: juejin

问题描述
文本框需要统计长度（支持输入表情），比如maxlength=200，需要在右下角实时显示字数，到200不可以输入了，右下角这个 1/200 是自己画的，取了输入框内value的长度（length）发现200之后还可以输入，无法精确控制在200
解决方案，转value（输入框内容）为数组，通过数组的长度来控制1/200的值，和maxlength=200可以匹配上

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./lodash.js"></script>
  <script>
  </script>
  <style>
    .box {
      height: 100px;
    }
  </style>
</head>

<body>
  <textarea id="input" maxlength="200" class="box"></textarea>
  <div id="txt"></div>

  <script>
    document.getElementById('input').oninput = function ontest(event) {
      console.log(_.toArray(event.target.value))
      // 转化为数组
      document.getElementById('txt').innerHTML = _.toArray(event.target.value)
      // 通过数组的长度限制大小
      if (event.target.value.length > 200) {
        return false
      }
      console.log(_.toArray('🤹‍♀️👌'))
    }
  </script>
</body>

</html>

效果预览 ---

有关于文本框max-length

主题列表：juejin, github, html,textarea,前端，h5

贡献主题：github.com/xitu/juejin…

theme: juejin highlight: juejin