编程 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 相关文章推荐

默认让页面的第一个控件选中的javascript代码

Dec 26 Javascript

jquery下将选择的checkbox的id组成字符串的方法

Nov 28 Javascript

jQuery版Tab标签切换

Mar 16 Javascript

jquery $.fn $.fx是什么意思有什么用

Nov 04 Javascript

巧用局部变量提升javascript性能

Feb 24 Javascript

学习javascript面向对象掌握创建对象的9种方式

Jan 04 Javascript

浏览器兼容的JS写法总结

Apr 27 Javascript

javascript prototype原型详解(比较基础)

Dec 26 Javascript

JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法

Jan 20 Javascript

Angular 5.0 来了! 有这些大变化

Nov 15 Javascript

详解Vue中watch的高级用法

May 02 Javascript

vue+element-ui表格封装tag标签使用插槽

Jun 18 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