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 相关文章推荐
jquery lazyload延迟加载技术的实现原理分析
Jan 24 Javascript
Jquery选中或取消radio示例
Sep 29 Javascript
js网页右下角提示框实例
Oct 14 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
Oct 17 Javascript
js字符串操作方法实例分析
May 06 Javascript
jQuery对html元素的取值与赋值实例详解
Dec 18 Javascript
JavaScript对象数组排序实例方法浅析
Jun 15 Javascript
一个简单的JavaScript Map实例(分享)
Aug 03 Javascript
javascript 判断是否是微信浏览器的方法
Oct 09 Javascript
JS使用贪心算法解决找零问题示例
Nov 27 Javascript
JS实现简单获取最近7天和最近3天日期的方法
Apr 18 Javascript
微信小程序语音同步智能识别的实现案例代码解析
May 29 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 已经成熟
2006/12/04 PHP
php 日期时间处理函数小结
2009/12/18 PHP
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
php实现的生成排列算法示例
2019/07/25 PHP
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
js字符编码函数区别分析
2011/12/28 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
JavaScript中的字符串操作详解
2013/11/12 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
2014/03/18 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
JS前端笔试题分析
2016/12/19 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
2017/01/18 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
微信小程序实现日历功能
2018/11/27 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
Python笔记(叁)继续学习
2012/10/24 Python
python实现给数组按片赋值的方法
2015/07/28 Python
Python虚拟环境virtualenv的安装与使用详解
2017/05/28 Python
儿童编程python入门
2018/05/08 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
python删除文本中行数标签的方法
2018/05/31 Python
使用python的pandas为你的股票绘制趋势图
2019/06/26 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
IronPython连接MySQL的方法步骤
2019/12/27 Python
python语言time库和datetime库基本使用详解
2020/12/25 Python
请介绍一下Ant
2016/07/22 面试题
党员先进性教育整改措施
2014/09/18 职场文书
出生公证书
2015/01/23 职场文书
幼师中班个人总结
2015/02/12 职场文书
浅谈redis缓存在项目中的使用
2021/05/20 Redis