jQuery maxlength文本字数限制插件


Posted in Javascript onApril 16, 2010

jQuery maxlength文本字数限制插件
实现这个效果有很多方法,这里就介绍一种jQuery插件maxlength,它的使用非常简单,让我们先看看演示:
jquery maxlength演示地址
演示代码打包下载 
看看Demo中的重点代码:
1.载入maxlength.js
<script type="text/javascript" src="maxlength.js"></script>
2.加入函数,Demo中有3个例子,你可以根据实际需要选择不同的函数,不过最后一个例子对于中文而言是无效的.

$(function () { 
$('textarea.limited').maxlength({ 
'feedback' : '.charsLeft', 'useInput' : true 
}); 
$('input.limited').maxlength({ 
'feedback' : '.charsLeft' 
}); 
$('textarea.wordLimited').maxlength({ 
'words': true, 
'feedback': '.wordsLeft', 'useInput' : true 
}); 
});

3.调用
<form action=""> 
<p>可以输入 <span class="charsLeft">20</span> 个字符</p> 
<textarea class="limited"></textarea> 
<input type="hidden" name="maxlength" value="20" /> 
</form> 
<form action=""> 
<p>可以输入 <span class="charsLeft">10</span> 个字符</p> 
<input maxlength="10" class="limited" /> 
</form>

一些必要的解释:
'useInput' : true 因为textarea需要借助input来实现,所以当你使用textarea的时候就需要这个参数
'feedback' : '.charsLeft' 是指即时显示的字数放入 class="charsLeft " 的容器中
input中设置最大数值直接用 maxlength="10"
textarea中的大数值需要设置与其对应input的value数值 value="20"

Javascript 相关文章推荐
javascript:FF/Chrome与IE动态加载元素的区别说明
Jan 26 Javascript
JS对象与json字符串格式转换实例
Oct 28 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
Jan 13 Javascript
jQuery ajaxForm()的应用
Oct 14 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
Mar 08 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
Aug 28 Javascript
JS沙箱模式实例分析
Sep 04 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 Javascript
angularJS实现动态添加,删除div方法
Feb 27 Javascript
video.js 实现视频只能后退不能快进的思路详解
Aug 09 Javascript
详解js删除数组中的指定元素
Oct 31 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
Nov 04 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
Apr 16 #Javascript
jQuery对象与DOM对象之间的转换方法
Apr 15 #Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
Apr 15 #Javascript
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
Apr 15 #Javascript
jQuery 打造动态下滑菜单实现说明
Apr 15 #Javascript
xheditor与validate插件冲突的解决方案
Apr 15 #Javascript
js 获取Listbox选择的值的代码
Apr 15 #Javascript
You might like
基于PHP常用字符串的总结(待续)
2013/06/07 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
浅谈PHP中单引号和双引号到底有啥区别呢?
2015/03/04 PHP
PHP简单实现二维数组的矩阵转置操作示例
2017/11/24 PHP
php合并数组并保留键值的实现方法
2018/03/12 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
dess中一个简单的多路委托的实现
2010/07/20 Javascript
基于jQuery的一个扩展form序列化到json对象
2010/12/09 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
2011/09/28 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
基于webpack 实用配置方法总结
2017/09/28 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
2017/12/26 Javascript
[原创]微信小程序获取网络类型的方法示例
2019/03/01 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
python的常见命令注入威胁
2013/02/18 Python
深入Python解释器理解Python中的字节码
2015/04/01 Python
Python从Excel中读取日期一列的方法
2018/11/28 Python
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
解决c++调用python中文乱码问题
2020/07/29 Python
Python正则re模块使用步骤及原理解析
2020/08/18 Python
HTML5中Localstorage的使用教程
2015/07/09 HTML / CSS
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
瑞士首家网上药店折扣店:McDrogerie
2020/12/22 全球购物
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
合作意向协议书
2015/01/29 职场文书
材料员岗位职责
2015/02/10 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
旅游项目合作意向书
2015/05/08 职场文书
Golang实现可重入锁的示例代码
2022/05/25 Golang
一文搞懂PHP中的抽象类和接口
2022/05/25 PHP