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模拟可展开、拖动与关闭的聊天窗口实例
May 12 Javascript
javaScript中push函数用法实例分析
Jun 08 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
Jun 24 Javascript
jQuery获取当前点击的对象元素(实现代码)
May 19 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
Bootstrap按钮组简单实现代码
Mar 06 Javascript
基于Bootstrap框架实现图片切换
Mar 10 Javascript
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
Aug 14 Javascript
js+canvas实现滑动拼图验证码功能
Mar 26 Javascript
ES7之Async/await的使用详解
Mar 28 Javascript
javascript实现抢购倒计时程序
Aug 26 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对MongoDB[NoSQL]数据库的操作
2013/03/01 PHP
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
Yii2组件之多图上传插件FileInput的详细使用教程
2016/06/20 PHP
PHP实现的猴王算法(猴子选大王)示例
2018/04/30 PHP
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
浅析jquery的js图表组件highcharts
2014/03/06 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
JavaScript数据类型转换的注意事项
2016/07/31 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
JS面向对象的程序设计相关知识小结
2018/05/26 Javascript
JavaScript Canvas编写炫彩的网页时钟
2019/10/16 Javascript
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
python机器学习之随机森林(七)
2018/03/26 Python
python使用socket创建tcp服务器和客户端
2018/04/12 Python
python自动登录12306并自动点击验证码完成登录的实现源代码
2018/04/25 Python
python skimage 连通性区域检测方法
2018/06/21 Python
Python安装与卸载流程详细步骤(图解)
2020/02/20 Python
django实现模型字段动态choice的操作
2020/04/01 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
洲际酒店集团美国官网:IHG美国
2017/11/16 全球购物
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
恶意软件的定义
2014/11/12 面试题
计算机应用专业毕业生求职信
2013/10/24 职场文书
个人对照检查材料
2014/02/12 职场文书
应届毕业生求职信
2014/05/26 职场文书
三月雷锋月活动总结
2014/07/03 职场文书
环保项目建议书
2014/08/26 职场文书
作风建设剖析材料
2014/10/06 职场文书
信访稳定工作汇报
2014/10/27 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
学生会工作感言
2015/08/07 职场文书
python中pandas对多列进行分组统计的实现
2021/06/18 Python