基于jquery的inputlimiter 实现字数限制功能

下面是实现基于jquery的inputlimiter实现字数限制功能的完整攻略：

1. 安装jquery

如果你还没有安装jquery，可以到官网(https://jquery.com/)下载最新版的jquery，并在html文件中引入。

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

2. 下载并引入inputlimiter插件

在github(https://github.com/yohannrub/inputlimiter)上下载最新版的inputlimiter插件，并在html文件中引入。

<script src="path/to/jquery.inputlimiter.js"></script>

3. 编写html

在html文件中，添加一个textarea标签，并为其设置id和maxlength属性。这里我们设置maxlength为100。

<textarea id="myTextarea" maxlength="100"></textarea>

4. 初始化inputlimiter插件

在html文件中，使用jquery选择器选择刚刚创建的textarea，并调用inputlimiter插件的limiter()方法来初始化插件。在传入limiter()方法的参数中，我们可以设置最大字数，以及提示消息的样式。

<script>
$(document).ready(function(){
  $('#myTextarea').limiter({
    limit: 100,        // 最大字数
    boxClass: 'limiterBox',          // 提示消息样式
    boxPosition: 'after'   // 提示消息位置
  });
});
</script>

5. 示例说明

示例1：统计字数并实时显示

在上面代码的基础上，我们可以通过jquery监听textarea文本框的输入事件，实时显示已输入的字符数。

<textarea id="myTextarea" maxlength="100"></textarea>
<div id="showCount"></div>

<script>
$(document).ready(function(){
  $('#myTextarea').limiter({
    limit: 100,
    boxClass: 'limiterBox',
    boxPosition: 'after',
    onBoxShow: function(box){
      $('#showCount').text(box.text().match(/\d+/)[0]);
    },
    onBoxHide: function(){
      $('#showCount').text('');
    }
  });

  $('#myTextarea').on('input', function(){
    $('#showCount').text($(this).val().length);
  });
});
</script>

在这个示例中，我们在textarea下面添加了一个div元素，用来显示已输入的字符数。然后，在input事件中使用jquery的val()方法获取textarea的值，并计算出长度，最后将计算结果动态更新到div元素中。

示例2：更改警告样式

上面代码中的提示消息样式有些简单，如果我们想要更改样式，可以在boxClass参数中传入自定义的样式。

<textarea id="myTextarea" maxlength="100"></textarea>

<script>
$(document).ready(function(){
  $('#myTextarea').limiter({
    limit: 100,
    boxClass: 'myBox',   // 自定义样式
    boxPosition: 'after'
  });
});
</script>

<style>
.myBox{
  display:none;
  background:red;
  color:white;
  padding:5px;
  margin-top:5px;
}
</style>

在这个示例中，我们在样式表中定义了.myBox的样式，背景颜色为红色，字体颜色为白色，内边距为5px，上下边距为5px，并设置了display:none 隐藏样式。

当用户输入的字数超过了设定的最大字数时，inputlimiter插件会动态添加class为myBox的提示消息，并显示在textarea下方。由于默认的提示消息样式会使样式表中定义的.myBox样式失效，所以需要在boxClass参数中传入自定义样式。