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 Firefox3.5中操作select的问题
Jul 10 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
Nov 30 Javascript
js闭包实例汇总
Nov 09 Javascript
js仿黑客帝国字母掉落效果代码分享
Nov 08 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 Javascript
页面内容排序插件jSort使用方法
Oct 10 Javascript
基于jQuery实现表格的查看修改删除
Aug 01 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
Aug 23 Javascript
Vue SSR 组件加载问题
May 02 Javascript
深入理解Vue Computed计算属性原理
May 29 Javascript
node.js 微信开发之定时获取access_token
Feb 07 Javascript
react ant Design手动设置表单的值操作
Oct 31 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
greybox——不开新窗口看新的网页
2007/02/20 Javascript
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
JavaScript forEach()遍历函数使用及介绍
2015/07/08 Javascript
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
Bootstrap编写导航栏和登陆框
2016/05/30 Javascript
正则表达式,替换所有HTML标签的简单实例
2016/11/28 Javascript
jQuery实现下拉菜单的实例代码
2017/06/19 jQuery
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
es6中Promise 对象基本功能与用法实例分析
2020/02/23 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
2020/11/09 Javascript
关于小程序优化的一些建议(小结)
2020/12/10 Javascript
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
python 测试实现方法
2008/12/24 Python
Python实时获取cmd的输出
2015/12/13 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
python中numpy.zeros(np.zeros)的使用方法
2017/11/07 Python
解决pandas read_csv 读取中文列标题文件报错的问题
2018/06/15 Python
python selenium firefox使用详解
2019/02/26 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
python调用自定义函数的实例操作
2019/06/26 Python
Python文件路径名的操作方法
2019/10/30 Python
Python命令行click参数用法解析
2019/12/19 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
Python创建简单的神经网络实例讲解
2021/01/04 Python
用CSS3写的模仿iPhone中的返回按钮
2015/04/04 HTML / CSS
New Balance美国官网:运动鞋和健身服装
2017/04/11 全球购物
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
财务经理岗位职责
2013/11/09 职场文书
培训主管的岗位职责
2013/11/23 职场文书
小松树教学反思
2014/02/11 职场文书
幼师个人总结范文
2015/02/28 职场文书
学子宴致辞大全
2015/07/27 职场文书
Python类方法总结讲解
2021/07/26 Python