文本框的字数限制功能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实现一个TreeMenu效果分享
Aug 28 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
Dec 07 Javascript
JavaScript与DOM组合动态创建表格实例
Dec 23 Javascript
使用Grunt.js管理你项目的应用说明
Apr 24 Javascript
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 Javascript
firefox浏览器不支持innerText的解决方法
Aug 07 Javascript
js图片卷帘门导航菜单特效代码分享
Sep 10 Javascript
跟我学习javascript的var预解析与函数声明提升
Nov 16 Javascript
Vue.js路由vue-router使用方法详解
Mar 20 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
May 19 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
Oct 31 Javascript
javascript 内存模型实例详解
Apr 18 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
第十一节 重载 [11]
2006/10/09 PHP
PHP Session变量不能传送到下一页的解决方法
2009/11/27 PHP
php 多关键字 高亮显示实现代码
2012/04/23 PHP
PHP网站开发中常用的8个小技巧
2015/02/13 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
CSDN轮换广告图片轮换效果
2007/03/27 Javascript
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
2017/04/11 Javascript
react-native-tab-navigator组件的基本使用示例代码
2017/09/07 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
原生js实现轮播图特效
2020/05/04 Javascript
[28:48]《真视界》- 2017年国际邀请赛
2017/09/27 DOTA
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
让python 3支持mysqldb的解决方法
2017/02/14 Python
Flask数据库迁移简单介绍
2017/10/24 Python
Vue的el-scrollbar实现自定义滚动
2018/05/29 Python
Python控制Firefox方法总结
2019/06/03 Python
关于django 1.10 CSRF验证失败的解决方法
2019/08/31 Python
详解Python3迁移接口变化采坑记
2019/10/11 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
canvas绘制树形结构可视图形的实现
2020/04/03 HTML / CSS
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
党员一句话承诺大全
2014/03/28 职场文书
销售岗位职责范本
2014/06/12 职场文书
感谢信格式范文
2015/01/22 职场文书
任命书怎么写
2015/03/02 职场文书
Hive HQL支持2种查询语句风格
2022/06/25 数据库