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

Chosen 基于jquery的选择框插件使用方法

May 30 Javascript

jQuery实现图片信息的浮动显示实例代码

Aug 28 Javascript

javascripit实现密码强度检测代码分享

Dec 12 Javascript

JS冒泡事件的快速解决方法

Dec 16 Javascript

jquery实现点击向下展开菜单项(伸缩导航)效果

Aug 22 Javascript

关于js二维数组和多维数组的定义声明(详解)

Oct 02 Javascript

jquery 一键复制到剪切板的实例

Sep 20 jQuery

vue 使用Jade模板写html,stylus写css的方法

Feb 23 Javascript

vue 2.5.1 源码学习之Vue.extend 和 data的合并策略

Jun 04 Javascript

vuex vue简单使用知识点总结

Aug 29 Javascript

js实现坦克移动小游戏

Oct 28 Javascript

详解React的回调渲染模式

Sep 10 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

php打印输出棋盘的实现方法

2014/12/23 PHP

laravel如何开启跨域功能示例详解

2017/08/31 PHP

Sample script that deletes a SQL Server database

2007/06/16 Javascript

jQuery新闻滚动插件 jquery.roller.js

2011/06/27 Javascript

laytpl 精致巧妙的JavaScript模板引擎

2014/08/29 Javascript

javascript记录文本框内文字个数检测文字个数变化

2014/10/14 Javascript

jquery利用拖拽方式在图片上添加热链接

2015/11/24 Javascript

JS实现DIV容器赋值的方法

2015/12/14 Javascript

浅谈sass在vue注意的地方

2017/08/10 Javascript

使用Fullpage插件快速开发整屏翻页的页面

2017/09/13 Javascript

JavaScript数组的5种迭代方法

2017/09/29 Javascript

JavaScript 下载svg图片为png格式

2018/06/21 Javascript

vue 界面刷新数据被清除 localStorage的使用详解

2018/09/16 Javascript

微信小程序代码上传、审核发布小程序

2019/05/18 Javascript

微信小程序设置滚动条过程详解

2019/07/25 Javascript

vue循环数组改变点击文字的颜色

2019/10/14 Javascript

解决vue-cli项目开发运行时内存暴涨卡死电脑问题

2019/10/29 Javascript

[01:53]2016完美“圣”典风云人物：Maybe专访

2016/12/05 DOTA

python数据结构之二叉树的遍历实例

2014/04/29 Python

Python抓取百度查询结果的方法

2015/07/08 Python

python分块读取大数据,避免内存不足的方法

2018/12/10 Python

pandas 把数据写入txt文件每行固定写入一定数量的值方法

2018/12/28 Python

Python 实现两个服务器之间文件的上传方法

2019/02/13 Python

Python直接赋值、浅拷贝与深度拷贝实例分析

2019/06/18 Python

python的sorted用法详解

2019/06/25 Python

python格式化输出保留2位小数的实现方法

2019/07/02 Python

python用match()函数爬数据方法详解

2019/07/23 Python

Django框架ORM数据库操作实例详解

2019/11/07 Python

使用Python爬虫库requests发送请求、传递URL参数、定制headers

2020/01/25 Python

如何打印出当前源文件的文件名以及源文件的当前行号

2015/04/05 面试题

大学总结自我鉴定

2014/01/18 职场文书

法学专业自我鉴定

2014/02/05 职场文书

《赠汪伦》教学反思

2014/04/12 职场文书

初三毕业评语

2014/12/26 职场文书

团拜会主持词

2015/07/04 职场文书

2016学习全国教书育人楷模先进事迹心得体会

2016/01/21 职场文书