文本框的字数限制功能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 相关文章推荐
mapper--图片热点区域高亮组件官方站点
Dec 22 Javascript
Jquery 插件开发笔记整理
Jan 17 Javascript
js实现在文本框光标处添加字符的方法介绍
Nov 24 Javascript
Extjs4 类的定义和扩展实例
Jun 28 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
Jan 05 Javascript
jQuery获取字符串中出现最多的数
Feb 22 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
Sep 06 Javascript
vue 简单自动补全的输入框的示例
Mar 12 Javascript
JavaScript递归函数定义与用法实例分析
Jan 24 Javascript
vue-loader中引入模板预处理器的实现
Sep 04 Javascript
Windows上node.js的多版本管理工具用法实例分析
Nov 06 Javascript
Vue 数据响应式相关总结
Jan 28 Vue.js
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简单smarty入门程序实例
2015/06/11 PHP
Linux操作系统安装LAMP环境
2015/06/26 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
Linux平台php命令行程序处理管道数据的方法
2016/11/10 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
javascript 延迟加载技术(lazyload)简单实现
2011/01/17 Javascript
jQuery的deferred对象使用详解
2011/08/20 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
2014/10/17 Javascript
jquery实现倒计时功能
2015/12/28 Javascript
js自定义select下拉框美化特效
2016/05/12 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
2016/12/05 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
create-react-app安装出错问题解决方法
2018/09/04 Javascript
通过实例解析JavaScript for in及for of区别
2020/06/15 Javascript
Python对象体系深入分析
2014/10/28 Python
Python过滤列表用法实例分析
2016/04/29 Python
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
Python引用计数操作示例
2018/08/23 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
numpy求平均值的维度设定的例子
2019/08/24 Python
django框架创建应用操作示例
2019/09/26 Python
python实现while循环打印星星的四种形状
2019/11/23 Python
python实现邮件循环自动发件功能
2020/09/11 Python
HTML5实时语音通话聊天MP3压缩传输3KB每秒
2019/08/28 HTML / CSS
美国购买当代和现代家具网站:MODTEMPO
2018/07/20 全球购物
到底Java是如何传递参数的?是by value或by reference?
2012/07/13 面试题
新闻专业推荐信范文
2013/11/20 职场文书
简历的个人自我评价范文
2014/01/03 职场文书
小学班主任培训方案
2014/06/04 职场文书
三严三实对照检查材料范文
2014/09/23 职场文书
婚前协议书范本
2014/10/27 职场文书
财产分割协议书范本
2014/11/03 职场文书
2015年中个人总结范文
2015/03/10 职场文书
中学生打架《检讨书》范文
2019/08/12 职场文书
Golang Web 框架Iris安装部署
2022/08/14 Python