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获取GridView选择的行内容
Apr 14 Javascript
用C/C++来实现 Node.js 的模块(一)
Sep 24 Javascript
jQuery中insertAfter()方法用法实例
Jan 08 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
jquery zTree异步加载简单实例讲解
Feb 25 Javascript
JS获取当前脚本文件的绝对路径
Mar 02 Javascript
js操作XML文件的实现方法兼容IE与FireFox
Jun 25 Javascript
Bootstrap3多级下拉菜单
Feb 24 Javascript
JavaScript用二分法查找数据的实例代码
Jun 17 Javascript
浅谈vue加载优化策略
Mar 19 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
Jun 10 Javascript
在vue中使用Echarts画曲线图的示例
Oct 03 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
PHP4引用文件语句的对比
2006/10/09 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
Yii中的cookie的发送和读取
2016/07/27 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
JQuery以JSON方式提交数据到服务端示例代码
2014/05/05 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
2014/05/14 Javascript
利用Angularjs和bootstrap实现购物车功能
2016/08/31 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
2016/09/04 Javascript
ES6中Array.includes()函数的用法
2017/09/20 Javascript
JavaScript门面模式详解
2017/10/19 Javascript
JS+CSS实现滚动数字时钟效果
2017/12/25 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
js实现图片实时时钟
2020/01/15 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
Python中的自定义函数学习笔记
2014/09/23 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
python命令行工具Click快速掌握
2019/07/04 Python
python文件处理fileinput使用方法详解
2020/01/02 Python
django实现日志按日期分割
2020/05/21 Python
使用python实现时间序列白噪声检验方式
2020/06/03 Python
威尔逊皮革:Wilsons Leather
2018/12/07 全球购物
Nasty Gal英国:美国女性服饰销售网站
2021/03/02 全球购物
自主招生自荐信
2013/12/08 职场文书
装饰资料员岗位职责
2013/12/30 职场文书
预备党员表决心书
2014/03/11 职场文书
六个一活动实施方案
2014/03/21 职场文书
班主任工作实习计划
2015/01/16 职场文书
杨善洲观后感
2015/06/04 职场文书
学籍证明模板
2015/06/18 职场文书
Python深度学习之Pytorch初步使用
2021/05/20 Python
浅谈如何提高PHP代码的质量
2021/05/28 PHP
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python
Go语言测试库testify使用学习
2022/07/23 Golang