jQuery 类twitter的文本字数限制带提示效果插件


Posted in Javascript onApril 16, 2010

之前也介绍过一个类似效果的JQuery插件jQuery maxlength文本字数限制插件,不过这次的charcount部署更简单,而且有超出数字提示的功能.
简单的部署:

1.载入js:

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/charCount.js"></script>

2.Html结构:
<form id="form" method="post" action=""> 
<h2>Default Usage</h2> 
<div> 
<label for="message">Type your message</label> 
<textarea id="message1" name="message1"></textarea> 
</div> 
<h2>Custom Usage</h2> 
<div> 
<label for="message">Another message (limited to 30, warning at 10)</label> 
<textarea id="message2" name="message2"></textarea> 
</div> 
</form>

3.charCount插件设置:
<script type="text/javascript"> 
$(document).ready(function(){ 
//default usage 
$("#message1").charCount(); 
//custom usage 
$("#message2").charCount({ 
allowed: 30, 
warning: 10, 
counterText: '剩余字数: ' 
}); 
}); 
</script>

演示代码
打包打包下载
Javascript 相关文章推荐
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
Mar 06 Javascript
javascript 星级评分效果(手写)
Dec 24 Javascript
密码框显示提示文字jquery示例
Aug 29 Javascript
document.forms用法示例介绍
Jun 26 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
Jul 29 Javascript
javascript实现加载xml文件的方法
Nov 24 Javascript
详解javascript事件绑定使用方法
Oct 20 Javascript
javascript实现Java中的Map对象功能的实例详解
Aug 21 Javascript
webpack写jquery插件的环境配置
Dec 21 jQuery
vue使用原生swiper代码实例
Feb 05 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
Jul 07 Javascript
面试中canvas绘制图片模糊图片问题处理
Mar 13 Javascript
jQuery maxlength文本字数限制插件
Apr 16 #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
You might like
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
discuz目录文件资料汇总
2014/12/30 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
Yii redis集合的基本使用教程
2020/06/14 PHP
使用js如何实现全选与全不选
2013/12/30 Javascript
jQuery实现的五子棋游戏实例
2015/06/13 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
bootstrap时间插件daterangepicker使用详解
2017/10/19 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
2018/01/31 Javascript
详解微信小程序之scroll-view的flex布局问题
2019/01/16 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
[01:00:30]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第二场 10.31
2020/11/02 DOTA
深入解析Python中函数的参数与作用域
2016/03/20 Python
利用Python将时间或时间间隔转为ISO 8601格式方法示例
2017/09/05 Python
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
python得到一个excel的全部sheet标签值方法
2018/12/10 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
Python3实现定时任务的四种方式
2019/06/03 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
python使用Matplotlib改变坐标轴的默认位置
2019/10/18 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
Python文件操作模拟用户登陆代码实例
2020/06/09 Python
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
2013/07/19 HTML / CSS
Fox Racing官方网站:越野摩托车和山地自行车装备和服装
2019/12/23 全球购物
中学家长会邀请函
2014/01/17 职场文书
职位说明书范文
2014/05/07 职场文书
篮球社团活动总结
2014/06/27 职场文书
2014教师专业技术工作总结
2014/12/03 职场文书
优秀党员申报材料
2014/12/18 职场文书
2016寒假社会实践心得体会范文
2015/10/09 职场文书
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python