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事件串连执行多个处理过程的方法
Mar 09 Javascript
jQuery使用手册之一
Mar 24 Javascript
JavaScript Prototype对象
Jan 07 Javascript
jquery验证表单中的单选与多选实例
Aug 18 Javascript
把jQuery的类、插件封装成seajs的模块的方法
Mar 12 Javascript
js日期联动示例
May 02 Javascript
关于JavaScript中name的意义冲突示例介绍
May 29 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
JavaScript数组方法总结分析
May 06 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
详解如何使用React Hooks请求数据并渲染
Oct 18 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函数篇详解十进制、二进制、八进制和十六进制转换函数说明
2011/12/05 PHP
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
form表单传递数组数据、php脚本接收的实例
2017/02/09 PHP
srcElement表格样式
2006/09/03 Javascript
JavaScript 事件参考手册
2008/12/24 Javascript
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
2009/07/25 Javascript
简单的jquery拖拽排序效果实现代码
2011/09/20 Javascript
Jquery获取复选框被选中值的简单方法
2013/07/04 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
2015/11/03 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
忘记ftp密码使用python ftplib库暴力破解密码的方法示例
2014/01/22 Python
Python内置函数Type()函数一个有趣的用法
2015/02/18 Python
Python使用cx_Oracle模块将oracle中数据导出到csv文件的方法
2015/05/16 Python
读写json中文ASCII乱码问题的解决方法
2016/11/05 Python
我们为什么要减少Python中循环的使用
2019/07/10 Python
python字符串的拼接方法总结
2019/11/18 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
HttpServlet类中的主要方法都有哪些?各自的作用是什么?
2014/03/16 面试题
工程师岗位职责
2013/11/08 职场文书
实习生单位鉴定意见
2013/12/04 职场文书
大学生创业计划书的用途
2014/01/08 职场文书
大学生旷课检讨书
2014/01/22 职场文书
电焊工工作岗位职责
2014/02/06 职场文书
心理学专业求职信
2014/06/16 职场文书
公司股东合作协议书
2014/09/14 职场文书
Nginx四层负载均衡的配置指南
2021/06/11 Servers
Python实现批量自动整理文件
2022/03/16 Python