为了账号安全,请及时绑定邮箱和手机立即绑定

jQuery插件InputLimitor实现文本框输入限制字数统计

标签:
JQuery

点我查看InputLimitor在线演示

使用说明
需要使用jQuery库文件和InputLimitor库文件
http://jquery.com/
http://plugins.jquery.com/project/inputlimitor

同时可自定义显示提示框的CSS样式

使用实例
一,包含文件部分

<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery-1.3.2.min.js"></script>
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery.inputlimitor.1.0.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.inputlimitor.1.0.css" />
二,HTML部分

<textarea rows="3" cols="30" name="textarea" class="limited"></textarea>
三,javascript部分

$('.limited').inputlimitor();
如上实例是最简单的一种使用形式,如果要提示当前字符输入数和总数,可使用如下方法:

$('input[name=text1]').inputlimitor({
limit: 50,
remText: '%n caractere%s restantes',
limitText: 'Campo limitado a %n caractere%s.'
});
limit表示字符输入的限制数,remText表示输入字符提示文本,其中%n表示当前剩余字符数,%s表示输入的限制数。

另外类似textlimit插件提示效果使用实例
1,HTML部分

<input type="text" name="text3" id="text3" size="30" />
<span id="limitingtext" >Field limited to 30 characters.</span>
2,Javascript部分

$('input[name=text3]').inputlimitor({
limit: 30,
boxId: 'limitingtext',
boxAttach: false
});
boxId表示提示信息显示的ID

InputLimitor插件与textlimit插件使用基本上差不多,都非常简单,InputLimitor插件功能更为强大,值得推荐!

 

点我下载InputLimitor
http://jquerycodes.googlecode.com/files/jquery-inputlimitor.1.0.zip

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消