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下判断一个对象是否具有指定名称的属性的的代码
Jan 11 Javascript
jQuery ui插件的使用方法代码实例
May 08 Javascript
js中replace的用法总结
Dec 27 Javascript
jquery等待效果示例
May 01 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
Apr 06 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
Apr 07 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
javascript轮播图算法
Oct 21 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 Javascript
详解JavaScript 高阶函数
Sep 14 Javascript
OpenLayers3加载常用控件使用方法详解
Sep 25 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
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
php数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
php获取post中的json数据的实现方法
2011/06/08 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
PHP反射API示例分享
2016/10/08 PHP
PHP 中使用ajax时一些常见错误总结整理
2017/02/27 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
解决JS中乘法的浮点错误的方法
2014/01/03 Javascript
JS比较2个日期间隔的示例代码
2014/04/15 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
javascript倒计时效果实现
2015/11/12 Javascript
jquery制作图片时钟特效
2020/03/30 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
手机端实现Bootstrap简单图片轮播效果
2016/10/13 Javascript
学好js,这些js函数概念一定要知道【推荐】
2017/01/19 Javascript
jquery网页加载进度条的实现
2017/06/01 jQuery
js编写简单的聊天室功能
2017/08/17 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
node.js爬虫框架node-crawler初体验
2020/10/29 Javascript
[45:14]Optic vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
python取代netcat过程分析
2018/02/10 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
Python如何实现动态数组
2019/11/02 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
python实现FTP文件传输的方法(服务器端和客户端)
2020/03/20 Python
python属于解释型语言么
2020/06/15 Python
python实现测试工具(二)——简单的ui测试工具
2020/10/19 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
团日活动总结报告
2014/06/25 职场文书
Python机器学习三大件之一numpy
2021/05/10 Python
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL