文本框的字数限制功能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 相关文章推荐
判断用户是否在线的代码
Mar 05 Javascript
JQuery动态创建DOM、表单元素的实现代码
Aug 09 Javascript
jquery对dom的操作常用方法整理
Jun 25 Javascript
javascript通过className来获取元素的简单示例代码
Jan 10 Javascript
js获取鼠标位置实例详解
Dec 09 Javascript
JavaScript记录光标在编辑器中位置的实现方法
Apr 22 Javascript
WdatePicker.js时间日期插件的使用方法
Jul 26 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
Mar 07 Javascript
微信小程序实现人脸检测功能
May 25 Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 Javascript
vue video和vue-video-player实现视频铺满教程
Oct 30 Javascript
如何在vue 中引入使用jquery
Nov 10 jQuery
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模拟HTTP认证
2006/10/09 PHP
PHP 批量删除 sql语句
2009/06/05 PHP
PHP开发过程中常用函数收藏
2009/12/14 PHP
zf框架的session会话周期及次数限制使用示例
2014/03/13 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
php文件后缀不强制为.php的实操方法
2019/09/18 PHP
showModelessDialog()使用详解
2006/09/21 Javascript
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
Javascript的比较汇总
2016/07/25 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
详解jQuery中的事件
2016/12/14 Javascript
基于js中style.width与offsetWidth的区别(详解)
2017/11/12 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
微信小程序开发中var that =this的用法详解
2020/01/18 Javascript
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
python中的函数用法入门教程
2014/09/02 Python
在Python中使用lambda高效操作列表的教程
2015/04/24 Python
Python学习小技巧之列表项的推导式与过滤操作
2017/05/20 Python
修复 Django migration 时遇到的问题解决
2018/06/14 Python
python通过txt文件批量安装依赖包的实现步骤
2019/08/13 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
美国领先的眼镜和太阳镜在线零售商:Glasses.com
2019/08/26 全球购物
SQL数据库笔试题
2016/03/08 面试题
一篇.NET面试题
2014/09/29 面试题
大专生自荐信
2013/10/04 职场文书
优秀士兵个人事迹材料
2014/01/19 职场文书
《锄禾》教学反思
2014/04/08 职场文书
民事诉讼授权委托书范文
2014/08/02 职场文书
运动会加油稿50字
2015/07/21 职场文书
安全教育日主题班会
2015/08/13 职场文书
少儿励志名言(80句)
2019/08/14 职场文书
《悲惨世界》:比天空更广阔的是人的心灵
2020/01/16 职场文书