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

演示  website 下载

这是一款轻量级高度可定制的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)' : ''); }
};

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