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官方 jQuery1.1.3发布,速度提升800%,体积保持20K
Aug 19 Javascript
jQuery实现跨域iframe接口方法调用
Mar 14 Javascript
Javascript调用函数方法的几种方式介绍
Mar 20 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 Javascript
JavaScript 拖拽实例代码
Sep 21 Javascript
利用JS实现页面删除并重新排序功能
Dec 09 Javascript
详解jQuery中的DOM操作
Dec 23 Javascript
Vue的土著指令和自定义指令实例详解
Feb 04 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
Aug 29 Javascript
简单通过settimeout看javascript的运行机制
May 10 Javascript
js闭包的9个使用场景
Dec 29 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 Static 关键字之旅模式
2015/11/13 PHP
PHP编程入门的基本语法知识点总结
2016/01/26 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
FLASH 广告之外的链接
2008/12/16 Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
iframe 父窗口和子窗口相互的调用方法集锦
2010/12/15 Javascript
JS实现图片翻书效果示例代码
2013/09/09 Javascript
setInterval与clearInterval的使用示例代码
2014/01/28 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
JavaScript数组去重的五种方法
2015/11/05 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
2015/11/30 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
详解node.js 下载图片的 2 种方式
2018/03/02 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
2019/11/06 Javascript
原生js实现随机点名
2020/07/05 Javascript
js实现微信聊天效果
2020/08/09 Javascript
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
pytorch 修改预训练model实例
2020/01/18 Python
Python实现代码块儿折叠
2020/04/15 Python
肯尼迪就职演说稿
2013/12/31 职场文书
财务管理职业生涯规划书
2014/02/26 职场文书
保护动物倡议书
2014/04/15 职场文书
《蚕姑娘》教学反思
2014/04/15 职场文书
中学生操行评语大全
2014/04/24 职场文书
电焊工岗位工作职责
2014/07/09 职场文书
2016年法制宣传月活动总结
2016/04/01 职场文书
python基础详解之if循环语句
2021/04/24 Python
详解MySQL中的主键与事务
2021/05/27 MySQL