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 相关文章推荐
fancybox modal的完美解决(右上的X)
Oct 30 Javascript
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
Jun 05 Javascript
jquery获取当前元素索引值用法实例
Jun 10 Javascript
swtich/if...else的替代语句
Aug 16 Javascript
跟我学习javascript的for循环和for...in循环
Nov 18 Javascript
jQuery验证插件validate使用详解
May 11 Javascript
Node.js实现兼容IE789的文件上传进度条
Sep 02 Javascript
使用jquery如何获取时间
Oct 13 Javascript
解决element ui select下拉框不回显数据问题的解决
Feb 20 Javascript
详解Angular cli配置过程记录
Nov 07 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
Dec 04 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
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
PHP与MYSQL中UTF8编码的中文排序实例
2014/10/21 PHP
thinkphp分页集成实例
2017/07/24 PHP
layui数据表格自定义每页条数limit设置
2019/10/26 PHP
jquery 可排列的表实现代码
2009/11/13 Javascript
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
jquery.messager.js插件导致页面抖动的解决方法
2013/07/14 Javascript
js判断登录与否并确定跳转页面的方法
2015/01/30 Javascript
director.js实现前端路由使用实例
2015/02/03 Javascript
jquery实现聚光灯效果的方法
2015/02/06 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
BootStrap入门教程(三)之响应式原理
2016/09/19 Javascript
浅谈jQuery操作类数组的工具方法
2016/12/23 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
2017/01/18 Javascript
微信小程序左右滑动切换页面详解及实例代码
2017/02/28 Javascript
作为老司机使用 React 总结的 11 个经验教训
2017/04/08 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
ionic2中使用自动生成器的方法
2018/03/04 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
django在接受post请求时显示403forbidden实例解析
2018/01/25 Python
Python工厂函数用法实例分析
2018/05/14 Python
Python实现多线程/多进程的TCP服务器
2019/09/03 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
史上最详细的Python打包成exe文件教程
2021/01/17 Python
HTML5实现签到 功能
2018/10/09 HTML / CSS
世界上最大的各式箱包网络零售店:eBag
2016/07/21 全球购物
英国鞋网:Rubber Sole
2020/03/03 全球购物
中专三年学习的个人自我评价
2013/12/12 职场文书
正风肃纪剖析材料
2014/09/30 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB
spring cloud 配置中心客户端启动遇到的问题
2021/09/25 Java/Android
详解nginx安装过程并代理下载服务器文件
2022/02/12 Servers