文本框的字数限制功能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 操作日期、星期、元素的追加的实现代码
Feb 07 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
Mar 05 Javascript
禁止页面刷新让F5快捷键及右键都无效
Jan 22 Javascript
js数字转换为float,取N位小数
Feb 08 Javascript
JavaScript中检查对象property的存在性方法介绍
Dec 30 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
Nov 26 Javascript
jQuery插件autocomplete使用详解
Feb 04 Javascript
Canvas实现动态的雪花效果
Feb 13 Javascript
jQuery实现一个简单的轮播图
Feb 19 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
详解在express站点中使用ejs模板引擎
Sep 21 Javascript
Vue如何循环提取对象数组中的值
Nov 18 Vue.js
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_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
PHP扩展开发教程(总结)
2015/11/04 PHP
php批量删除操作(数据访问)
2017/05/23 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
PHP 判断字符串是中文还是英文, 或者是中英混合
2021/03/09 PHP
破除网页鼠标右键被禁用的绝招大全
2006/12/27 Javascript
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
2009/06/04 Javascript
海量经典的jQuery插件集合
2010/01/12 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
JavaScript中的undefined学习总结
2013/11/30 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
2017/06/05 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
使用selenium抓取淘宝的商品信息实例
2018/02/06 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
vue.extend实现alert模态框弹窗组件
2018/04/28 Javascript
Vue.js添加组件操作示例
2018/06/13 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
2018/07/26 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
python关闭windows进程的方法
2015/04/18 Python
python3 实现的对象与json相互转换操作示例
2019/08/17 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
css3气泡 css3关键帧动画创建的动态通知气泡
2013/02/26 HTML / CSS
html svg生成环形进度条的实现方法
2019/09/23 HTML / CSS
台湾家适得:Homeget
2019/02/11 全球购物
Zooplus罗马尼亚:宠物食品和配件
2019/11/02 全球购物
四年的大学生生活自我评价
2013/12/09 职场文书
《菜园里》教学反思
2014/04/17 职场文书
新学期开学演讲稿
2014/05/24 职场文书
小学运动会演讲稿
2014/08/25 职场文书
应届毕业生自荐信
2015/03/04 职场文书
2015年校医个人工作总结
2015/07/24 职场文书
2017春节晚会开幕词
2016/03/03 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书