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显示随机图像或引用
Apr 21 Javascript
原生JavaScript实现滚动条效果
Mar 24 Javascript
JS未跨域操作iframe里的DOM
Jun 01 Javascript
jQuery实现用户输入自动完成功能
Feb 13 Javascript
JS二叉树的简单实现方法示例
Apr 05 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
Nov 23 Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 Javascript
手把手教你写一个微信小程序(推荐)
Oct 17 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
Apr 09 Javascript
JavaScript实现单英文金山打字通
Jul 24 Javascript
javascript关于“时间”的一次探索
Jul 24 Javascript
vue eslint简要配置教程详解
Jul 26 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
教你如何把一篇文章按要求分段
2006/10/09 PHP
php中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
一个PHP的QRcode类与大家分享
2011/11/13 PHP
PHP 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
PHP 利用Mail_MimeDecode类提取邮件信息示例
2014/01/26 PHP
在WordPress中实现评论头像的自定义默认和延迟加载
2015/11/24 PHP
php实现微信支付之退款功能
2018/05/30 PHP
对YUI扩展的Gird组件 Part-1
2007/03/10 Javascript
javascript dom 基本操作小结
2010/04/11 Javascript
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
JavaScript实现将UPC转换成ISBN的方法
2015/05/26 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
2016/06/12 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
2016/10/11 Javascript
原生js实现查询天气小应用
2016/12/09 Javascript
基于jQuery实现的打字机效果
2017/01/16 Javascript
jQuery模拟淘宝购物车功能
2017/02/27 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
2017/07/11 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
vue项目中用cdn优化的方法
2018/01/03 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
Nuxt页面级缓存的实现
2020/03/09 Javascript
js实现贪吃蛇游戏 canvas绘制地图
2020/09/09 Javascript
[53:21]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-CDEC
2014/05/22 DOTA
[01:36]极致酷炫!TI9典藏宝瓶+撼地者至宝展示
2019/06/11 DOTA
使用Python批量修改文件名的代码实例
2019/01/24 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
Python 使用xlwt模块将多行多列数据循环写入excel文档的操作
2020/11/10 Python
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
教师批评与自我批评
2014/10/15 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
解析目标检测之IoU
2021/06/26 Python
python使用BeautifulSoup 解析HTML
2022/04/24 Python