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 相关文章推荐
SyntaxHighlighter语法高亮插件使用说明
Aug 14 Javascript
Javascript面向对象编程(三) 非构造函数的继承
Aug 28 Javascript
JavaScript面向对象程序设计三 原型模式(上)
Dec 21 Javascript
jQuery 事件的命名空间简单了解
Nov 22 Javascript
jQuery实现的导航动画效果(附demo源码)
Apr 01 Javascript
jQuery实现下拉加载功能实例代码
Apr 01 Javascript
Bootstrap 源代码分析(未完待续)
Aug 17 Javascript
Vue 拦截器对token过期处理方法
Jan 23 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
May 23 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
vue-自定义组件传值的实例讲解
Sep 18 Javascript
JavaScript判断对象和数组的两种方法
May 31 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 PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
关于Javascript 的 prototype问题。
2007/01/03 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
2010/10/20 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
js实现网站首页图片滚动显示
2013/02/04 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
2013/11/25 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
javascript实现简单的二级联动
2015/03/19 Javascript
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
javascript点击按钮实现隐藏显示切换效果
2016/02/03 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
浅谈ECMAScript 中的Array类型
2019/06/10 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
[28:57]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/16 DOTA
python中map、any、all函数用法分析
2015/04/21 Python
Python中方法链的使用方法
2016/02/23 Python
Python爬虫使用Selenium+PhantomJS抓取Ajax和动态HTML内容
2018/02/23 Python
pycharm打开命令行或Terminal的方法
2019/01/16 Python
在Qt5和PyQt5中设置支持高分辨率屏幕自适应的方法
2019/06/18 Python
python 读写excel文件操作示例【附源码下载】
2019/06/19 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
python 实现人和电脑猜拳的示例代码
2020/03/02 Python
mac 上配置Pycharm连接远程服务器并实现使用远程服务器Python解释器的方法
2020/03/19 Python
基于python实现检索标记敏感词并输出
2020/05/07 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
python 常见的排序算法实现汇总
2020/08/21 Python
python爬虫scrapy框架的梨视频案例解析
2021/02/20 Python
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
销售代表求职自荐信
2013/10/01 职场文书
大学生职业规划前言模板
2013/12/27 职场文书
热情服务标语
2014/10/07 职场文书
乡镇科协工作总结2015
2015/05/19 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书
python脚本框架webpy的url映射详解
2021/11/20 Python
HTML实现仿Windows桌面主题特效的实现
2022/06/28 HTML / CSS