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 相关文章推荐
用js实现预览待上传的本地图片
Mar 15 Javascript
Javascript学习笔记2 函数
Jan 11 Javascript
js优化针对IE6.0起作用(详细整理)
Dec 25 Javascript
javascript实现存储hmtl字符串示例
Apr 25 Javascript
探索Vue.js component内容实现
Nov 03 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
JS+HTML5 FileReader对象用法示例
Apr 07 Javascript
JavaScript实现省市县三级级联特效
May 16 Javascript
Vue Ajax跨域请求实例详解
Jun 20 Javascript
JS解析后台返回的JSON格式数据实例
Aug 06 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
Aug 24 Javascript
ajax与jsonp的区别及用法
Oct 16 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 特殊字符处理函数
2008/09/05 PHP
ThinkPHP之N方法实例详解
2014/06/20 PHP
PHP 7.0.2 正式版发布
2016/01/08 PHP
php socket通信简单实现
2016/11/18 PHP
Ext面向对象开发实践(续)
2008/11/18 Javascript
jQuery学习3:操作元素属性和特性
2010/02/07 Javascript
kmock javascript 单元测试代码
2011/02/06 Javascript
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
2014/05/19 Javascript
js 采用delete实现继承示例代码
2014/05/20 Javascript
解析JavaScript的ES6版本中的解构赋值
2015/07/28 Javascript
浅谈JavaScript 的执行顺序
2015/08/07 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
input 禁止输入特殊字符的四种实现方式
2016/08/24 Javascript
Bootstrap如何创建表单
2016/10/21 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
mpvue 单文件页面配置详解
2018/12/02 Javascript
详解JWT token心得与使用实例
2019/08/02 Javascript
Node.js文本文件BOM头的去除方法
2020/11/22 Javascript
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
Python实现excel转sqlite的方法
2017/07/17 Python
使用Python读取安卓手机的屏幕分辨率方法
2018/03/31 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
加拿大著名时装品牌:SOIA & KYO
2016/08/23 全球购物
Sofmap官网:日本著名的数码电器专卖店
2017/05/19 全球购物
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
一套VC试题
2015/01/23 面试题
工程安全员岗位职责
2014/03/09 职场文书
会计学自荐信
2014/06/03 职场文书
实习生矿工检讨书
2014/10/13 职场文书
小学教师教学反思
2016/02/24 职场文书
利用Python网络爬虫爬取各大音乐评论的代码
2021/04/13 Python
CSS实现章节添加自增序号的方法
2021/06/23 HTML / CSS