textarea输入框监听和输入字数限制以及样式设置

html

   <p class="describe">分类描述</p>
      <div class="desc">
        <textarea  class="wishContent"  placeholder="请输入分类描述，最多255字。" maxlength="255" ></textarea>
        <div class="wordsNum">
          <span class="wordsNum_v1">0</span>
          <span class="wordsNum_v2">/255</span>
        </div>
      </div>

css

.content textarea {
border: none;
width: 94%;
height: 6.55rem;
margin: 0.2rem 0.5rem;
resize: none; 其他样式忽略，这里主要设置文本域的右下角角标
}

js

<script>
    //封装一个限制字数方法
    var checkStrLengths = function (str, maxLength) {
    
    
      var maxLength = maxLength;
      var result = 0;
      if (str && str.length > maxLength) {
    
    
        result = maxLength;
      } else {
    
    
        result = str.length;
      }
      return result;
    };

    //监听输入
    $(".wishContent").on("input propertychange", function () {
    
    
      //获取输入内容
      var userDesc = $(this).val();
      //判断字数
      var len;
      if (userDesc) {
    
    
        len = checkStrLengths(userDesc, 255);
      } else {
    
    
        len = 0;
      }
      //显示字数及输入样式
      $(".wordsNum_v1").html(len);
      $(".wordsNum_v1").css("color", "rgb(51,51,51)");
    });
  </script>

效果如下图