文本框的字数限制功能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 相关文章推荐
杨氏矩阵查找的JS代码
Mar 21 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
对象转换为原始值的实现方法
Jun 06 Javascript
AngularJS打开页面隐藏显示表达式用法示例
Dec 25 Javascript
self.attachevent is not a function的解决方法
Apr 04 Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
Apr 26 Javascript
Vue 递归多级菜单的实例代码
May 05 Javascript
解决在Vue中使用axios用form表单出现的问题
Oct 30 Javascript
js抽奖转盘实现方法分析
May 16 Javascript
详解vue路由
Aug 05 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
是否存在第一台收音机的说法
2021/03/01 无线电
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
php采用curl模仿登录人人网发布动态的方法
2014/11/07 PHP
php正则替换处理HTML页面的方法
2015/06/17 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
Javascript学习笔记6 prototype的提出
2010/01/11 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
jquery模拟按下回车实现代码
2011/09/20 Javascript
js 判断文件类型并控制表单提交示例代码
2013/11/14 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
[01:46]TI4西雅图DOTA2前线报道 中国选手抱团调时差
2014/07/08 DOTA
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
Python外星人入侵游戏编程完整版
2020/03/30 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
神经网络相关之基础概念的讲解
2018/12/29 Python
Python 实现子类获取父类的类成员方法
2019/01/11 Python
Python迭代器Iterable判断方法解析
2020/03/16 Python
Python操控mysql批量插入数据的实现方法
2020/10/27 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
Hanky Panky官方网站:内衣和睡衣
2019/07/25 全球购物
如果NULL定义成#define NULL((char *)0)难道不就可以向函数传入不加转换的NULL了吗
2012/02/15 面试题
积极贯彻学习两会精神总结
2014/03/17 职场文书
公司慰问信范文
2015/03/23 职场文书
远程教育培训心得体会
2016/01/09 职场文书
情侣餐厅的创业计划书范本!
2019/07/26 职场文书
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL
Python实现排序方法常见的四种
2021/07/15 Python
JavaScript 事件捕获冒泡与捕获详情
2021/11/11 Javascript
Docker官方工具docker-registry案例演示
2022/04/13 Servers
原生JS实现分页
2022/04/19 Javascript
Nginx配置使用详解
2022/07/07 Servers
css清除浮动clearfix:after的用法详解(附完整代码)
2023/05/21 HTML / CSS