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 this关键字使用分析
Oct 21 Javascript
输入密码检测大写是否锁定js实现代码
Dec 03 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
JS简单实现String转Date的方法
Mar 02 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
Aug 03 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
Jan 04 Javascript
jQuery密码强度验证控件使用详解
Jan 05 Javascript
你不知道的 javascript【推荐】
Jan 08 Javascript
浅谈React Native Flexbox布局(小结)
Jan 08 Javascript
详解jQuery-each()方法
Mar 13 jQuery
深入理解javascript prototype的相关知识
Sep 19 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
discuz目录文件资料汇总
2014/12/30 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
2007/03/06 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
Jquery 实现grid绑定模板
2015/01/28 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
2015/06/12 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
2015/08/27 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
js+css3制作时钟特效
2016/10/16 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
nodeJS模块简单用法示例
2018/04/21 NodeJs
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
python修改字典内key对应值的方法
2015/07/11 Python
Python实现多并发访问网站功能示例
2017/06/19 Python
Python pandas常用函数详解
2018/02/07 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
python集合是否可变总结
2019/06/20 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
使用CSS3编写类似iOS中的复选框及带开关的按钮
2016/04/11 HTML / CSS
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
LACOSTE波兰官网:Polo衫、服装和鞋类
2020/09/29 全球购物
企业门卫岗位职责
2013/12/12 职场文书
法制报告会主持词
2014/04/02 职场文书
经典团队口号
2014/06/06 职场文书
2014年大学宣传部工作总结
2014/12/19 职场文书
销售开票员岗位职责
2015/04/15 职场文书
python内置进制转换函数的操作
2021/06/02 Python
Java8中接口的新特性使用指南
2021/11/01 Java/Android
使用Java去实现超市会员管理系统
2022/03/18 Java/Android
MySQL去除密码登录告警的方法
2022/04/20 MySQL
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript