编程 Javascript

文本框的字数限制功能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

文本框的字数限制功能jquery插件

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

通过身份证号得到出生日期和性别的js代码

Nov 23 Javascript

jquery之超简单的div显示和隐藏特效demo(分享)

Jul 09 Javascript

用js代码改变单选框选中状态的简单实例

Dec 18 Javascript

JS获取URL中参数值（QueryString）的4种方法分享

Apr 12 Javascript

javascript实现2016新年版日历

Jan 25 Javascript

jQuery实现在新增加的元素上添加事件方法案例分析

Feb 09 Javascript

JS实现的集合去重，交集，并集，差集功能示例

Mar 13 Javascript

微信小程序适配iphoneX的实现方法

Sep 18 Javascript

JS实现随机生成10个手机号的方法示例

Dec 07 Javascript

浅谈JavaScript 代码简洁之道

Jan 09 Javascript

微信小程序实现购物车代码实例详解

Aug 29 Javascript

JS获取表格视图所选行号的ids过程解析

Feb 21 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

canvas(2) 代理(2) 图片模糊(1) #{}(1) GNN(1) flex(1) 外键(1) 选择器(1) SQL注入(2) flex-shrink(1)