ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter


Posted in Javascript onFebruary 03, 2012

•可限制最大输入字符长度
•可设置字符截取速度
•可自定义提示信息文本样式(可以改进自定义文本内容)
该插件统计英文字符和中文的长度是一样的。
废话少说,这里直接奉上详细插件代码,具体实现细节已经在代码里面有注释:

; (function ($) { 
$.fn.extend({ 
textAreaCount: function (options) { 
var $textArea = this; 
options = $.extend({ 
maxlength: 140, // 定义一个最大输入长度变量,初始化为500 
speed: 15, // 定义删除字符的速度变量 
msgstyle: "font-family:Arial;font-size:small;color:Gray;small;text-align:right;margin-top:3px;", // 提示信息显示样式 
msgNumStyle: "font-weight:bold;color:Gray;font-style:italic;font-size:larger;" // 提示信息里面剩余长度的样式 
}, options); 
var $msg = $("<div style='" + options.msgstyle + "'></div>"); 
// 在文本框框后面动态加载一个提示信息容器 
$textArea.after($msg); 
// 添加keypress事件用来判断当前内容是否还可输入 
$textArea.keypress(function (e) { 
// 8是Backspace按键, 46是Delete按键 
// 如果当前可输入的字符长度为0, 且按键值不是8和46,就不做任何操作 
if ($textArea.val().length >= options.maxlength && e.which != '8' && e.which != '46') { 
e.preventDefault(); 
return; 
} 
}).keyup(function () { // 添加keyup事件用来计算剩余输入字并显示 
var curlength = this.value.length; 
$msg.html("").html("还能输入<span style='" + options.msgNumStyle + "'>" + (options.maxlength - curlength) + "</span>字"); 
var init = setInterval(function () { 
// 如果输入的内容大于设置的最大长度,内容按设置的速度自动截取 
if ($textArea.val().length > options.maxlength) { 
$textArea.val($textArea.val().substring(0, options.maxlength)); 
$msg.html("").html("还能输入<span style='" + options.msgNumStyle + "'>" + options.maxlength + "</span>字"); 
} 
else { 
clearInterval(init); 
} 
}, options.speed); 
}).bind("contextmenu", function (e) { // 禁止鼠标右键,防止通过鼠标操作文本 
return false; 
}); 
// 首次加载现在可输入字符长度提示信息 
$msg.html("").html("还能输入<span style='" + options.msgNumStyle + "'>" + options.maxlength + "</span>字"); 
return this; 
} 
}); 
})(jQuery);

直接把上面代码复制保存到jquery.textareacounter.js.
Demo:
现在我们来看下如何使用该插件,首先要引用该插件,代码如下:
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> 
<script src="Scripts/jquery.textareacounter.js" type="text/javascript"></script>

页面结构代码:
<form id="form1" runat="server"> 
<div align="center"> 
<fieldset style="width: 400px; height: 250px"> 
<table cellpadding="3" cellspacing="3" border="0"> 
<tr> 
<td> 
<b>请输入您的评价:</b> 
</td> 
</tr> 
<tr> 
<td> 
<asp:TextBox ID="txtCmt" runat="server" TextMode="MultiLine" Width="300px" Rows="5"></asp:TextBox> 
</td> 
</tr> 
</table> 
</fieldset> 
</div> 
</form>

调用插件实现文本框控件txtCmt的字符限制功能,脚本代码:
<script type="text/javascript"> 
$(document).ready(function () { 
$("#txtCmt").textAreaCount({ maxlength: 200, speed: 256 }); 
}); 
</script>

注:要使用该插件,调用textAreaCount()方法即可,可以设置该方法的options参数,
options参数说明:
maxlength:设置最大输入字符数量
speed:设置截取字符的速度
msgstyle:设置文本提示信息主题的样式
msgNumStyle:设置文本提示信息里剩余字符数量的样式
最终使用该插件后的效果图:

ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter

Javascript 相关文章推荐
js操作ajax返回的json的注意问题!
Feb 23 Javascript
JavaScript中继承的一些示例方法与属性参考
Aug 07 Javascript
深入理解Javascript中的循环优化
Nov 09 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 Javascript
Javascript判断图片尺寸大小实例分析
Jun 16 Javascript
js实现局部页面打印预览原理及示例代码
Jul 03 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
Aug 19 Javascript
关于验证码在IE中不刷新的快速解决方法
Sep 23 Javascript
js精确的加减乘除实例
Nov 14 Javascript
Vue.js样式动态绑定实现小结
Jan 24 Javascript
Element ui 下拉多选时新增一个选择所有的选项
Aug 21 Javascript
vue渲染方式render和template的区别
Jun 05 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
Feb 03 #Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 #Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
Feb 03 #Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 #Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
Feb 03 #Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
Feb 03 #Javascript
jQuery表单验证插件formValidator(改进版)
Feb 03 #Javascript
You might like
php 空格,换行,跳格使用说明
2009/12/18 PHP
PHP 代码规范小结
2012/03/08 PHP
深入解析PHP中逗号与点号的区别
2013/08/05 PHP
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
PHP命名空间namespace用法实例分析
2016/09/27 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
PHP面向对象继承用法详解(优化与减少代码重复)
2016/12/02 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
js滚动条多种样式,推荐
2007/02/05 Javascript
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
JS选项卡动态替换banner图片路径的方法
2015/05/11 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
jQuery回调方法使用示例
2017/06/26 jQuery
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
vue中get请求如何传递数组参数的方法示例
2019/11/08 Javascript
详解python使用turtle库来画一朵花
2019/03/21 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
Pandas缺失值2种处理方式代码实例
2020/06/13 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
GoDaddy英国:全球排名第一的域名注册商
2018/06/08 全球购物
英国休闲奢华的缩影:Crew Clothing
2019/05/05 全球购物
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
九月份红领巾广播稿
2014/01/22 职场文书
自荐信格式简述
2014/01/25 职场文书
企业管理毕业生求职信范文
2014/03/07 职场文书
建设办主任四风问题整改思路和措施
2014/09/20 职场文书
群众路线党员个人剖析材料
2014/10/08 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书
vue封装数字翻牌器
2022/04/20 Vue.js