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 相关文章推荐
JQuery1.4+ Ajax IE8 内存泄漏问题
Oct 15 Javascript
在多个页面使用同一个HTML片段的代码
Mar 04 Javascript
文本域光标操作的jQuery扩展分享
Mar 10 Javascript
JavaScript实现的石头剪刀布游戏源码分享
Aug 22 Javascript
jquery实现勾选复选框触发事件给input赋值
Feb 01 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
Feb 24 Javascript
JavaScript 正则表达式中global模式的特性
Feb 25 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 Javascript
js实现移动端微信页面禁止字体放大
Feb 16 Javascript
微信小程序中显示倒计时代码实例
May 09 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
一款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
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
CI框架表单验证实例详解
2016/11/21 PHP
如何做到打开一个页面,过几分钟自动转到另一页面
2007/04/20 Javascript
js怎么终止程序return不行换jfslk
2013/05/30 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
2013/08/26 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
2014/01/11 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
bootstrap table 服务器端分页例子分享
2015/02/10 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
2017/02/22 Javascript
基于JavaScript实现无限加载瀑布流
2017/07/21 Javascript
Angular请求防抖处理第一次请求失效问题
2019/05/17 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
JS call()及apply()方法使用实例汇总
2020/07/11 Javascript
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28
2020/12/02 DOTA
如何运行Python程序的方法
2013/04/21 Python
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
python绘制简单折线图代码示例
2017/12/19 Python
python的依赖管理的实现
2019/05/14 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
Linux面试经常问的文件系统操作命令
2016/10/04 面试题
机械制造与自动化应届生求职信
2013/11/16 职场文书
实习生个人的自我评价
2013/12/08 职场文书
学生打架检讨书大全
2014/01/23 职场文书
心理咨询承诺书
2014/05/20 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
第一节英语课开场白
2015/06/01 职场文书
捐款仪式主持词
2015/07/04 职场文书
爱国教育主题班会
2015/08/14 职场文书
大学班长竞选稿
2015/11/20 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server