文本框的字数限制功能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 相关文章推荐
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
Jan 27 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
Jul 31 Javascript
Jquery的each里用return true或false代替break或continue
May 21 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 Javascript
返回函数的JavaScript函数
Jun 14 Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
Dec 02 Javascript
vue深入解析之render function code详解
Jul 18 Javascript
vue.extend实现alert模态框弹窗组件
Apr 28 Javascript
使用zrender.js绘制体温单效果
Oct 31 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
Aug 07 Javascript
vue中v-model对select的绑定操作
Aug 31 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
linux下实现定时执行php脚本
2015/02/13 PHP
php查看网页源代码的方法
2015/03/13 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
js获取当月最后一天实例代码
2013/11/19 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
2015/02/25 Javascript
浅谈Javascript数组的使用
2015/07/29 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
2016/10/09 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
2020/11/16 Javascript
如何使用Bootstrap 按钮实例详解
2017/03/29 Javascript
nodejs 如何手动实现服务器
2018/08/20 NodeJs
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
2019/04/09 Javascript
抖音上用记事本编写爱心小程序教程
2019/04/17 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
python中的for循环
2018/09/28 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
Keras实现支持masking的Flatten层代码
2020/06/16 Python
python 8种必备的gui库
2020/08/27 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
网络维护中文求职信
2014/01/03 职场文书
上课迟到检讨书
2014/01/19 职场文书
请假条标准格式规范
2014/04/10 职场文书
大学新生军训自我鉴定
2014/09/18 职场文书
2014年维稳工作总结
2014/11/18 职场文书
2014年实习期工作总结
2014/11/27 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
毕业论文致谢信
2015/05/14 职场文书
就业证明函
2015/06/17 职场文书
结婚典礼主持词
2015/06/29 职场文书
background-position百分比原理详解
2021/05/08 HTML / CSS
Redis中一个String类型引发的惨案
2021/07/25 Redis