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 相关文章推荐
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
JavaScript中获取样式的原生方法小结
Oct 08 Javascript
Jquery对select的增、删、改、查操作
Feb 06 Javascript
javascript Array 数组常用方法
Apr 05 Javascript
JavaScript记录光标在编辑器中位置的实现方法
Apr 22 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
Dec 07 Javascript
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
ReactNative Image组件使用详解
Aug 07 Javascript
vue中组件的3种使用方式详解
Mar 23 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
Jul 25 Javascript
Node.js web 应用如何封装到Docker容器中
Sep 01 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
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
星际实力自我测试
2020/03/04 星际争霸
我的论坛源代码(七)
2006/10/09 PHP
php笔记之常用文件操作
2010/10/12 PHP
Drupal读取Excel并导入数据库实例
2014/03/02 PHP
二级域名转向类
2006/11/09 Javascript
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
详解JavaScript基于面向对象之继承实例
2015/12/16 Javascript
JavaScript进阶练习及简单实例分析
2016/06/03 Javascript
什么是JavaScript中的结果值?
2016/10/08 Javascript
浅析javascript中的Event事件
2016/12/09 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
2017/08/14 Javascript
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
2019/02/13 Javascript
[03:04]DOTA2英雄基础教程 影魔
2013/12/11 DOTA
python 简易计算器程序,代码就几行
2009/08/29 Python
python实现ip查询示例
2014/03/26 Python
跟老齐学Python之网站的结构
2014/10/24 Python
Python中Random和Math模块学习笔记
2015/05/18 Python
python、java等哪一门编程语言适合人工智能?
2017/11/13 Python
Python实现从log日志中提取ip的方法【正则提取】
2018/03/31 Python
解决PyCharm import torch包失败的问题
2018/10/13 Python
pygame实现五子棋游戏
2019/10/29 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
俄罗斯儿童和青少年服装、鞋子及配件的在线商店:Orby
2020/02/20 全球购物
美国亚马逊旗下时尚女装网店:SHOPBOP(支持中文)
2020/10/17 全球购物
生产经理的自我评价分享
2013/11/07 职场文书
个人求职信范文
2014/05/24 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
计算机多媒体专业自荐信
2014/07/04 职场文书
2014年社区工会工作总结
2014/12/18 职场文书
职称评定个人总结
2015/03/05 职场文书
2015年团支部工作总结
2015/04/03 职场文书
2016年教师党员公开承诺书
2016/03/24 职场文书
mysql 子查询的使用
2022/04/28 MySQL