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 相关文章推荐
慎用 somefunction.prototype 分析
Jun 02 Javascript
33种Javascript 表格排序控件收集
Dec 03 Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 Javascript
跟我学习javascript的隐式强制转换
Nov 16 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 Javascript
JQuery.validationEngine表单验证插件(推荐)
Dec 10 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
Feb 28 Javascript
微信小程序实现多选删除列表数据功能示例
Jan 15 Javascript
手把手带你封装一个vue component第三方库
Feb 14 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
Apr 17 Javascript
React Native 混合开发多入口加载方式详解
Sep 23 Javascript
js中addEventListener()与removeEventListener()用法案例分析
Mar 02 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数据流应用的一个简单实例
2012/09/14 PHP
PHP 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
php把session写入数据库示例
2014/02/26 PHP
PHP二维数组去重实例分析
2016/11/18 PHP
PHP自动载入类文件函数__autoload的使用方法
2019/03/25 PHP
ThinkPHP5.1验证码功能实现的示例代码
2020/06/08 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
2012/12/27 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
2013/12/09 Javascript
js与运算符和或运算符的妙用
2014/02/14 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
原生javascript实现的ajax异步封装功能示例
2016/11/03 Javascript
vue实现页面加载动画效果
2017/09/19 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
React Router V4使用指南(精讲)
2018/09/17 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
2019/05/14 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
2019/05/22 Javascript
ES10的13个新特性示例(小结)
2019/09/23 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
2019/12/17 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
python从ftp下载数据保存实例
2013/11/20 Python
python进阶教程之动态类型详解
2014/08/30 Python
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
python 实现矩阵按对角线打印
2019/11/29 Python
Python 支持向量机分类器的实现
2020/01/15 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
《那片绿绿的爬山虎》教学反思
2014/02/27 职场文书
材料工程专业毕业生求职信
2014/03/04 职场文书
出生证明范本
2015/06/15 职场文书
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL
js Proxy的原理详解
2021/05/25 Javascript
MySQL中出现乱码问题的终极解决宝典
2021/05/26 MySQL
PHP获取学生成绩的方法
2021/11/17 PHP