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之函数直接量(function(){})()
Jun 29 Javascript
11款新鲜的jQuery插件[附所有demo下载]
Jan 24 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
Oct 21 Javascript
JQuery与JS里submit()的区别示例介绍
Feb 17 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
May 29 Javascript
javascript手风琴下拉菜单实现代码
Nov 12 Javascript
JS设置下拉列表框当前所选值的方法
Dec 22 Javascript
微信小程序 icon组件详细及实例代码
Oct 25 Javascript
layui导航栏实现代码
May 19 Javascript
Vue中使用vee-validate表单验证的方法
May 09 Javascript
jquery实现的分页显示功能示例
Aug 23 jQuery
前端开发基础javaScript的六大作用
Aug 06 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
我的群发邮件程序
2006/10/09 PHP
CI(CodeIgniter)框架介绍
2014/06/09 PHP
实例详解PHP中html word 互转的方法
2016/01/28 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
JavaScript 事件系统
2010/07/22 Javascript
jQuery Tools tab使用介绍
2012/07/14 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
2012/10/15 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
2013/01/29 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
2013/10/24 Javascript
Node.js与PHP、Python的字符处理性能对比
2014/07/06 Javascript
JavaScript内存管理介绍
2015/03/13 Javascript
JS递归遍历对象获得Value值方法技巧
2016/06/14 Javascript
webpack之引入图片的实现及问题
2018/10/08 Javascript
nodeJS进程管理器pm2的使用
2019/01/09 NodeJs
学习LayUI时自研的表单参数校验框架案例分析
2019/07/29 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
[38:23]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第一场
2014/05/24 DOTA
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
python 容器总结整理
2017/04/04 Python
Python编程实现蚁群算法详解
2017/11/13 Python
tensorflow获取变量维度信息
2018/03/10 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
vscode 配置 python3开发环境的方法
2019/09/19 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
解决Pymongo insert时会自动添加_id的问题
2020/12/05 Python
详解css3 mask遮罩实现一些特效
2018/10/24 HTML / CSS
如何理解委托
2012/01/06 面试题
公司周年庆典邀请函
2014/01/12 职场文书
网络技术专业推荐信
2014/02/20 职场文书
六一儿童节主持词
2014/03/21 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书
关于Python中*args和**kwargs的深入理解
2021/08/07 Python