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 相关文章推荐
同时使用n个window onload加载实例介绍
Apr 25 Javascript
无缝滚动js代码通俗易懂(自写)
Jun 19 Javascript
javascript:文字不间断向左移动的实例代码
Aug 08 Javascript
node.js Web应用框架Express入门指南
May 28 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 Javascript
jQuery遍历DOM元素与节点方法详解
Apr 14 Javascript
20行JS代码实现粘贴板复制功能
Feb 06 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 Javascript
微信小程序HTTP请求从0到1封装
Sep 09 Javascript
如何在Vue中抽离接口配置文件
Oct 31 Javascript
Element Card 卡片的具体使用
Jul 26 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中0,null,empty,空,false,字符串关系的详细介绍
2013/06/20 PHP
PHP正则表达式匹配替换与分割功能实例浅析
2017/02/04 PHP
JQuery为textarea添加maxlength属性并且兼容IE
2013/04/25 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
javascript实现的一个带下拉框功能的文本框
2014/05/08 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
2014/05/28 Javascript
判断访客终端类型集锦
2015/06/05 Javascript
javascript中数组方法汇总
2015/07/07 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
js轮播图的插件化封装详解
2017/07/17 Javascript
浅谈JS封闭函数、闭包、内置对象
2017/07/18 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
2017/12/11 Javascript
Vue精简版风格概述
2018/01/30 Javascript
Koa项目搭建过程详细记录
2018/04/12 Javascript
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
jquery的$().each和$.each的区别
2019/01/18 jQuery
微信小程序配置服务器提示验证token失败的解决方法
2019/04/03 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
2020/01/05 Javascript
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
跟老齐学Python之重回函数
2014/10/10 Python
Python格式化压缩后的JS文件的方法
2015/03/05 Python
Python实现GUI学生信息管理系统
2020/04/05 Python
Python csv模块使用方法代码实例
2019/08/29 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
运行tensorflow python程序,限制对GPU和CPU的占用操作
2020/02/06 Python
超全Python图像处理讲解(多模块实现)
2020/04/13 Python
详解rem 适配布局
2018/10/31 HTML / CSS
what is the difference between ext2 and ext3
2015/08/25 面试题
网上卖盒饭创业计划书范文
2014/02/07 职场文书
星级党支部申报材料
2014/05/31 职场文书
小学生感恩老师演讲稿
2014/08/28 职场文书
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL