文本框的字数限制功能jquery插件


Posted in Javascript onNovember 24, 2009

后来在网上闲逛的时候突然发现一个比较好的文本框的字数限制的jquery plugin,简单好用
效果如下图
文本框的字数限制功能jquery插件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>关于文本框的字数限制功能</title> 
<script type="text/javascript" src="jquery-1.2.6.min.js"></script> 
<script type="text/javascript" src="maxlength.js"></script> 
</head> 
<body> 
<p>Enter your hobbies (<50 characters)</p> 
<textarea style="width:300px; height:150px" data-maxsize="50" data-output="status1" wrap="virtual"></textarea><br /> 
<div id="status1" style="width:300px;font-weight:bold;text-align:right"></div><br /> 
<p>Enter your postal code (<6 characters)</p> 
<input type="text" name="T1" size="15" data-maxsize="6"> 
</body> 
</html>

属性解释:

data-maxsize:该文本域能够接受的最大字数.(important)
data-output:如果想实时动态显示文本框里的字数,该属性设置显示字数的span或div的id.(字数显示的颜色会随着数量变化)
如果不修改它的源文件的话,加添了js引用后,你只需要给自己的text或者textarea加上data-maxsize属性就可以了。
关于动态设置最大值
使用setformfieldsize方法:
setformfieldsize($field, maxsize, outputfieldid)
属性解释:
$field:就是被限制的文本框的JQuery对象(参考Jquery文档).
maxsize:和data-maxsize一样,该文本域能够接受的最大字数.
outputfieldid:和data-output一样.
例子:

<script type="text/javascript"> 
//jQuery(document).ready(function($){ //fire on DOM ready 
setformfieldsize(jQuery('#comment'), 50, 'charsremain') 
//}); 
</script>

在界面加载时执行.
演示代码下载http://xiazai.3water.com/200911/yuanma/textarea_maxlength.rar
Javascript 相关文章推荐
用cssText批量修改样式
Aug 29 Javascript
javascript concat数组累加 示例
Sep 03 Javascript
js更优雅的兼容
Aug 12 Javascript
JavaScript游戏之是男人就下100层代码打包
Nov 08 Javascript
JavaScript模拟实现继承的方法
Mar 30 Javascript
jquery选择器简述
Aug 31 Javascript
React.js入门实例教程之创建hello world 的5种方式
May 11 Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
Oct 31 Javascript
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
AjaxFileUpload.js实现异步上传文件功能
Apr 19 Javascript
vue-amap根据地址回显地图并mark的操作
Nov 03 Javascript
js数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 #Javascript
jquery ajax提交表单数据的两种方式
Nov 24 #Javascript
js loading加载效果实现代码
Nov 24 #Javascript
jquery.ui.draggable中文文档
Nov 24 #Javascript
JS 实现双色表格实现代码
Nov 24 #Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 #Javascript
asp.net下利用js实现返回上一页的实现方法小集
Nov 24 #Javascript
You might like
新手配置 PHP 调试环境(IIS+PHP+MYSQL)
2007/01/10 PHP
PHP 字符串 小常识
2009/06/05 PHP
PHP 冒泡排序算法的实现代码
2010/08/08 PHP
php像数组一样存取和修改字符串字符
2014/03/21 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
Thinkphp 框架扩展之类库扩展操作详解
2020/04/23 PHP
jQuery中调用WebService方法小结
2011/03/28 Javascript
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
JavaScript新窗口与子窗口传值详解
2014/02/11 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
浅析AngularJS Filter用法
2015/12/28 Javascript
jquery.form.js异步提交表单详解
2017/04/25 jQuery
node.js express中app.param的用法详解
2017/07/16 Javascript
微信小程序搭建自己的Https服务器
2019/05/02 Javascript
vue2 拖动排序 vuedraggable组件的实现
2019/08/08 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
JS轮播图的实现方法2
2020/08/25 Javascript
[02:05]2014DOTA2西雅图邀请赛 老队长全明星大猜想谁不服就按进显示器
2014/07/08 DOTA
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
寻找网站后台地址的python脚本
2014/09/01 Python
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
你所在的项目是如何确定版本号的
2015/12/28 面试题
Java语言程序设计测试题选择题部分
2014/04/03 面试题
中层干部岗位职责
2013/12/18 职场文书
拾金不昧锦旗标语
2014/06/27 职场文书
学雷锋标兵事迹材料
2014/08/18 职场文书
四风对照检查剖析材料
2014/10/07 职场文书
学校运动会简讯
2015/07/20 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
2016年“世界环境日”校园广播稿
2015/12/18 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python