帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

jquery统计input、textarea表单输入实时字数插件

帝国模板之家 2020-11-20 网页特效 评论

这是一款轻量级高度可定制的jquery字符计数器插件。用于计算<input />和<textarea />元素输入字符数。

主要特点:

  • 支持HTML数据属性设置计数器。

  • 当字数即将达到上限时,计数器提示警告。

  • 达到限制时自动截断字符。

  • 支持多语言

  • 5个内置字符计数和倒计模式。

使用方法:

1.首先,在HTML页面中加载jQuery库和charcounter插件文件。

<link rel="stylesheet" href="charcounter.css" />
<script src="jquery.min.js"></script>
<script src="charcounter.js"></script>

2.创建input或textarea元素,并设置允许输入的最大字符数(默认值:255),如下所示:

<input id="demo" />
$(function(){
  $('#example').CharCounter({
    max: 60
  });
});

3. 或者用html属性来指定输入最大字符数。

<input id="demo"
       data-charcounter='{"max": 60}' 
/>

4. 达到字符限制后是否阻止输入。默认值:false。

$('#example').CharCounter({
  truncateAfterMax: false
});

5. 支持的模式:

count: 默认模式

countdown: 统计剩余字符,例如剩余60个字符

countOnMax: 显示最大计数,例如8/60

countAndTooMuch:显示超出限制的字符数,例如81个字符(多21个字符)

countdownAndTooMuch: 显示超出限制的字符数,例如剩余0个字符

$('#example').CharCounter({
  method: 'countdown'
});

6.使用warningRatio选项确定插件何时向字符计数器添加警告类。

$('#example').CharCounter({
  warningRatio: 0.2
});

7. 跟踪事件。

$('#example').CharCounter({
  events: 'keyup change'
});

8. 自定义字符计数器标记和CSS类。

$('#example').CharCounter({
  containerTag: 'span',
  containerClass: 'charcounter-container'
});

9. 格式字符计数器。

$('#example').CharCounter({
  locale: 'fr'
});
$.fn.CharCounter.locales.fr = {
  countdown: function (count, plural) { return count + ' caractère' + (plural ? 's' : '') + ' restant' + (plural ? 's' : ''); },
  count: function (count, plural) { return count + ' caractère' + (plural ? 's' : ''); },
  countOnMax: function (count, plural, max) { return this.count(count, plural) + ' / ' + max; },
  countdownAndTooMuch: function (count, plural, tooMuch) { return this.countdown(count, plural) + (tooMuch > 0 ? ' (' + tooMuch + ' en trop)' : ''); },
  countAndTooMuch: function (count, plural, tooMuch) { return this.count(count, plural) + (tooMuch > 0 ? ' (' + tooMuch + ' en trop)' : ''); }
};

会员登陆后即可下载资源文件。更多好用网站特效插件,请关注帝国模板之家

这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言