jQuery插件InputLimitor实现文本框输入限制字数统计
上期在[jQuery插件textlimit实现Javascript统计和限制字符个数功能]一文中介绍了使用jQuery实现文本框输入限制并统计字符的的插件,这里介绍另外一个文本框输入限制与统计工具,区别在于InputLimitor可实现自定义的提示文本,如当前输入字符数和限制数提示,非常实用,使用非常简单,效果图如下:

点我查看InputLimitor在线演示
使用说明
需要使用jQuery库文件和InputLimitor库文件
http://jquery.com/
http://plugins.jquery.com/project/inputlimitor
同时可自定义显示提示框的CSS样式
使用实例
一,包含文件部分
- <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
- <script type="text/javascript" src="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" style="color: #999;">Field limited to 30 characters.</span>
2,Javascript部分
- $('input[name=text3]').inputlimitor({
- limit: 30,
- boxId: 'limitingtext',
- boxAttach: false
- });
boxId表示提示信息显示的ID
InputLimitor插件与textlimit插件使用基本上差不多,都非常简单,InputLimitor插件功能更为强大,值得推荐!
点我查看InputLimitor在线演示
点我下载InputLimitor
http://jquerycodes.googlecode.com/files/jquery-inputlimitor.1.0.zip
原创文章如转载,请注明:转载自 必优博客 http://www.biuuu.com/
本文链接地址:http://www.biuuu.com/p1094.html






























我要评论