文本框的字数限制功能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 相关文章推荐
javascript div 弹出可拖动窗口
Feb 26 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
Dec 06 Javascript
基于jquery的跟随屏幕滚动代码
Jul 24 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 Javascript
解决json日期格式问题的3种方法
Feb 02 Javascript
jQuery $命名冲突解决方案汇总
Nov 13 Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
Dec 19 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
Jun 29 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
Jul 19 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
Aug 16 Javascript
Ajax请求超时与网络异常处理图文详解
May 23 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
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
php post大量数据时发现数据丢失问题解决方法
2015/06/20 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
共享自己写一个框架DreamScript
2007/01/20 Javascript
javascript getElementsByClassName实现代码
2010/10/11 Javascript
js中prototype用法详细介绍
2013/11/14 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
jQuery插件实现大图全屏图片相册
2015/03/14 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
2016/09/21 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
2020/03/04 Javascript
AutoJs实现刷宝短视频的思路详解
2020/05/22 Javascript
Windows下Python2与Python3两个版本共存的方法详解
2017/02/12 Python
详解django.contirb.auth-认证
2018/07/16 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
解决python写入带有中文的字符到文件错误的问题
2019/01/31 Python
python3通过selenium爬虫获取到dj商品的实例代码
2019/04/25 Python
Python如何读写二进制数组数据
2020/08/01 Python
Supersmart英国:欧洲市场首批食品补充剂供应商之一
2018/05/05 全球购物
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
财务管理职业生涯规划书
2014/02/26 职场文书
2014社区三八妇女节活动总结
2014/03/01 职场文书
公司年会搞笑主持词
2014/03/24 职场文书
《登鹳雀楼》教学反思
2014/04/09 职场文书
意向协议书范本
2014/04/23 职场文书
演讲稿祖国在我心中
2014/05/04 职场文书
Java如何实现树的同构?
2021/06/22 Java/Android