文本框的字数限制功能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 相关文章推荐
JQuery拖拽元素改变大小尺寸实现代码
Dec 10 Javascript
javascript两种function的定义介绍及区别说明
May 02 Javascript
js字母大小写转换实现方法总结
Nov 13 Javascript
jquery使用ul模拟select实现表单美化的方法
Aug 18 Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
JavaScript笛卡尔积超简单实现算法示例
Jul 30 Javascript
解决vue axios的封装 请求状态的错误提示问题
Sep 25 Javascript
vue form check 表单验证的实现代码
Dec 09 Javascript
JS数组方法reverse()用法实例分析
Jan 18 Javascript
一篇文章带你从零快速上手Rollup
Sep 07 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
Oct 30 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 和 MySQL 基础教程(三)
2006/10/09 PHP
写出高质量的PHP程序
2012/02/04 PHP
Yii2中多表关联查询hasOne hasMany的方法
2017/02/15 PHP
jquery之empty()与remove()区别说明
2010/09/10 Javascript
本地对象Array的原型扩展实现代码
2010/12/04 Javascript
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
探讨jQuery的ajax使用场景(c#)
2013/12/03 Javascript
快速解决jQuery与其他库冲突的方法介绍
2014/01/02 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
2015/05/25 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
2015/09/01 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
JS查找英文文章中出现频率最高的单词
2017/03/20 Javascript
jQuery validata插件实现方法
2017/06/25 jQuery
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
详解Vue2.0 事件派发与接收
2017/09/05 Javascript
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
python网络编程学习笔记(九):数据库客户端 DB-API
2014/06/09 Python
Flask框架web开发之零基础入门
2018/12/10 Python
Python re 模块findall() 函数返回值展现方式解析
2019/08/09 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
python游戏开发的五个案例分享
2020/03/09 Python
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
HTML5表格_动力节点Java学院整理
2017/07/11 HTML / CSS
详解前端HTML5几种存储方式的总结
2016/12/27 HTML / CSS
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
诺思信科技(南京)有限公司.NET笔试题答案
2013/07/06 面试题
师范生实习的个人自我鉴定
2013/10/20 职场文书
电气专业应届生求职信
2013/11/01 职场文书
2014年学校工会工作总结
2014/12/06 职场文书
手术室护士个人总结
2015/02/13 职场文书
董事长秘书工作总结
2015/08/14 职场文书
2015年圣诞节寄语
2015/08/17 职场文书
工程主管竞聘书
2015/09/15 职场文书
2015年乡镇食品安全工作总结
2015/10/22 职场文书
解决Golang中goroutine执行速度的问题
2021/05/02 Golang
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题