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 相关文章推荐
JavaScript中的16进制字符(改进)
Nov 21 Javascript
jQuery function的正确书写方法
Aug 02 Javascript
使用jQuery jqPlot插件绘制柱状图
Dec 18 Javascript
jQuery.extend 函数及用法详细
Sep 06 Javascript
js图片轮播效果实现代码
Apr 18 Javascript
利用Jquery队列实现根据输入数量显示的动画
Sep 01 Javascript
Jquery删除css属性的简单方法
Dec 04 Javascript
Vue.js devtool插件安装后无法使用的解决办法
Nov 27 Javascript
Router解决跨模块下的页面跳转示例
Jan 11 Javascript
JavaScript实现简单的文本逐字打印效果示例
Apr 12 Javascript
webpack项目轻松混用css module的方法
Jun 12 Javascript
this在vue和小程序中的使用详解
Jan 28 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
ecshop适应在PHP7的修改方法解决报错的实现
2016/11/01 PHP
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
jQuery遍历Form示例代码
2013/09/03 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
2013/09/10 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
JS实现点击按钮获取页面高度的方法
2015/11/02 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
Vue.js 插件开发详解
2017/03/29 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
2018/08/19 Javascript
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
2020/06/16 Javascript
Vue实现随机验证码功能
2020/12/29 Vue.js
[44:22]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第一场 11.01
2020/11/02 DOTA
Python切片用法实例教程
2014/09/08 Python
python实现2048小游戏
2015/03/30 Python
详解Python中的文本处理
2015/04/11 Python
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
使用Python写一个贪吃蛇游戏实例代码
2017/08/21 Python
Python爬虫_城市公交、地铁站点和线路数据采集实例
2018/01/10 Python
python清除字符串中间空格的实例讲解
2018/05/11 Python
Python pyautogui模块实现鼠标键盘自动化方法详解
2020/02/17 Python
浅析Python __name__ 是什么
2020/07/07 Python
python 中的命名空间,你真的了解吗?
2020/08/19 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
征用土地赔偿协议书
2014/09/26 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
2014年保安个人工作总结
2014/11/13 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
2015年度残疾人工作总结
2015/05/14 职场文书
二十年同学聚会致辞
2015/07/28 职场文书
PHP策略模式写法
2021/04/01 PHP
OpenCV全景图像拼接的实现示例
2021/06/05 Python
python 网络编程要点总结
2021/06/18 Python
2022新作动画《福星小子》释出宣传影片 加入内田真礼&宫野真守配音演出
2022/04/08 日漫
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS