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 相关文章推荐
JS获取后台Cookies值的小例子
Mar 04 Javascript
javascript的 {} 语句块详解
Feb 27 Javascript
Bootstrap实现弹性搜索框
Jul 11 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
Dec 05 Javascript
vue.js加载新的内容(实例代码)
Jun 01 Javascript
Vue.js中数据绑定的语法教程
Jun 02 Javascript
JS实现百度搜索接口及链接功能实例代码
Feb 02 Javascript
js合并两个数组生成合并后的key:value数组
May 09 Javascript
详解Vue-Router源码分析路由实现原理
May 15 Javascript
jQuery实现简易QQ聊天框
Feb 10 jQuery
elementui的el-popover修改样式不生效的解决
Jun 30 Javascript
React Fragment介绍与使用详解
Nov 11 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数组函数序列之array_key_exists() - 查找数组键名是否存在
2011/10/29 PHP
基于PHP文件操作的详细诠释
2013/06/21 PHP
PHP扩展开发入门教程
2015/02/26 PHP
DEDE实现转跳属性文档在模板上调用出转跳地址
2016/11/04 PHP
Ucren Virtual Desktop V2.0
2006/11/07 Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
2010/04/25 Javascript
基于prototype扩展的JavaScript常用函数库
2010/11/30 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
NodeJs 模仿SIP话机注册的方法
2019/06/21 NodeJs
React路由鉴权的实现方法
2019/09/05 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
python解析xml文件实例分享
2013/12/04 Python
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
浅谈Python在pycharm中的调试(debug)
2018/11/29 Python
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
pytorch进行上采样的种类实例
2020/02/18 Python
python str字符串转uuid实例
2020/03/03 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
加拿大大码女装购物网站:Penningtons
2020/12/26 全球购物
新闻专业推荐信范文
2013/11/20 职场文书
申报职称专业技术个人的自我评价
2013/12/12 职场文书
留学推荐信怎么写
2014/01/25 职场文书
维稳工作承诺书
2015/01/20 职场文书
2015年安全生产责任书
2015/01/30 职场文书
教师节老师寄语
2015/05/28 职场文书
小学运动会前导词
2015/07/20 职场文书
Python实现天气查询软件
2021/06/07 Python
试了下Golang实现try catch的方法
2021/07/01 Golang
Python Matplotlib绘制条形图的全过程
2021/10/24 Python