文本框的字数限制功能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 相关文章推荐
兼容IE和FF的js脚本代码小结(比较常用)
Dec 06 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
Jan 24 Javascript
jQuery提示插件alertify使用指南
Apr 21 Javascript
JavaScript数组各种常见用法实例分析
Aug 04 Javascript
jQuery地图map悬停显示省市代码分享
Aug 20 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
Jan 28 Javascript
JS Attribute属性操作详解
May 19 Javascript
基于JS实现仿百度百家主页的轮播图效果
Mar 06 Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 Javascript
webpack4的迁移的使用方法
May 25 Javascript
少女风vue组件库的制作全过程
May 15 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
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多文件上传实现代码
2014/02/20 PHP
ThinkPHP3.1数据CURD操作快速入门
2014/06/19 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
JavaScript在IE中“意外地调用了方法或属性访问”
2008/11/19 Javascript
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
JavaScript 拾漏补遗
2009/12/27 Javascript
js类型检查实现代码
2010/10/29 Javascript
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
使用js判断控件是否获得焦点
2014/01/03 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
2014/01/06 Javascript
Javascript中数组方法汇总(推荐)
2015/04/01 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
JS获取鼠标选中的文字
2016/08/10 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
js中getter和setter用法实例分析
2018/08/14 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
[42:32]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.27
2020/12/01 DOTA
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
Python生成pdf文件的方法
2014/08/04 Python
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
python实现写数字文件名的递增保存文件方法
2018/10/25 Python
深入浅析Python 中的sklearn模型选择
2019/10/12 Python
python 实现音频叠加的示例
2020/10/29 Python
python制作抽奖程序代码详解
2021/01/15 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
大学生毕业自荐信
2013/10/10 职场文书
工业自动化专业毕业生推荐信
2013/11/18 职场文书
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
工地安全质量标语
2014/06/07 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
企业财务人员岗位职责
2015/04/14 职场文书
Windows下用Nginx配置https服务器及反向代理的问题
2021/09/25 Servers