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 相关文章推荐
select标签模拟/美化方法采用JS外挂式插件
Apr 01 Javascript
js实现模拟银行卡账号输入显示效果
Nov 18 Javascript
JS实现控制文本框的内容
Jul 10 Javascript
Bootstrap Img 图片样式(推荐)
Dec 13 Javascript
JS批量替换内容中关键词为超链接
Feb 20 Javascript
Vue中封装input组件的实例详解
Oct 17 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
Vue.js进阶知识点总结
Apr 01 Javascript
解决vue.js 数据渲染成功仍报错的问题
Aug 25 Javascript
微信小程序实现工作时间段选择
Feb 15 Javascript
详解jQuery如何实现模糊搜索
May 10 jQuery
在vue中阻止浏览器后退的实例
Nov 06 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
日本因肺炎疫情影响,这几部动漫推延播放!
2020/03/03 日漫
解析phpstorm + xdebug 远程断点调试
2013/06/20 PHP
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
Javascript学习笔记4 Eval函数
2010/01/11 Javascript
jquery与prototype框架的详细对比
2013/11/21 Javascript
JavaScript前端图片加载管理器imagepool使用详解
2014/12/29 Javascript
jQuery知识点整理
2015/01/30 Javascript
JavaScript数组常用方法
2015/03/02 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
2016/05/31 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
JS填写银行卡号每隔4位数字加一个空格
2016/12/19 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
2017/04/11 jQuery
详解在Angular项目中添加插件ng-bootstrap
2017/07/04 Javascript
详解VUE调用本地json的使用方法
2019/05/15 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
vue实现前端列表多条件筛选
2020/10/26 Javascript
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
朴素贝叶斯Python实例及解析
2018/11/19 Python
python 利用文件锁单例执行脚本的方法
2019/02/19 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
python制作抽奖程序代码详解
2021/01/15 Python
韩语专业本科生求职信
2013/10/01 职场文书
家居设计专业个人自荐信范文
2013/11/26 职场文书
医护人员英文求职信范文
2013/11/26 职场文书
施工资料员的岗位职责
2013/12/22 职场文书
活动总结格式范文
2014/04/26 职场文书
航空学院求职信
2014/06/11 职场文书
入股合作协议书
2014/10/12 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
大学开学感言
2015/08/01 职场文书