网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
这是一款轻量级高度可定制的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)' : ''); }
};
转载请注明来源:jquery统计input、textarea表单输入实时字数插件
本文永久链接地址:https://www.moyouyouw.cn/code/781.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论