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 相关文章推荐
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
jQuery表单美化插件jqTransform使用详解
Apr 12 Javascript
JQuery勾选指定name的复选框集合并显示的方法
May 18 Javascript
充分发挥Node.js程序性能的一些方法介绍
Jun 23 Javascript
javascript日期操作详解(脚本之家整理)
Sep 05 Javascript
JavaScript仿支付宝密码输入框
Dec 29 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
Angular项目从新建、打包到nginx部署全过程记录
Dec 09 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
基于JS实现数字动态变化显示效果附源码
Jul 18 Javascript
详解element-ui中表单验证的三种方式
Sep 18 Javascript
在vue中使用Base64转码的案例
Aug 07 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
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
smarty模板引擎基础知识入门
2015/03/30 PHP
分享PHP守护进程类
2015/12/30 PHP
PHP memcache在微信公众平台的应用方法示例
2017/09/13 PHP
基于Laravel-admin 后台的自定义页面用法详解
2019/09/30 PHP
javascript call和apply方法
2008/11/24 Javascript
js 解决“options为空或不是对象”
2008/12/22 Javascript
如何让div span等元素能响应键盘事件操作指南
2012/11/13 Javascript
IE6下opacity与JQuery的奇妙结合
2013/03/01 Javascript
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
JavaScript利用正则表达式去除日期中的-
2014/06/09 Javascript
js判断手机和pc端选择不同执行事件的方法
2015/01/30 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
过期软件破解办法实例详解
2017/01/04 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
如何编写jquery插件
2017/03/29 jQuery
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
Node.js API详解之 zlib模块用法分析
2020/05/19 Javascript
在Python中操作文件之read()方法的使用教程
2015/05/24 Python
django使用admin站点上传图片的实例
2019/07/28 Python
python3实现mysql导出excel的方法
2019/07/31 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
numpy中生成随机数的几种常用函数(小结)
2020/08/18 Python
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
COSETTE官网:奢华,每天
2020/03/22 全球购物
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
小学生安全保证书
2014/02/01 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
群众路线自我剖析及整改措施
2014/11/04 职场文书
使用 Apache Dubbo 实现远程通信(微服务架构)
2022/02/12 Servers
java开发双人五子棋游戏
2022/05/06 Java/Android
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技