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 相关文章推荐
响应鼠标变换表格背景或者颜色的代码
Mar 30 Javascript
学习jQuey中的return false
Dec 18 Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
Aug 16 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
Oct 10 Javascript
JS和canvas实现俄罗斯方块
Mar 14 Javascript
react.js CMS 删除功能的实现方法
Apr 17 Javascript
单行 JS 实现移动端金钱格式的输入规则
May 22 Javascript
微信小程序实现倒计时60s获取验证码
Apr 17 Javascript
React-Native使用Mobx实现购物车功能
Sep 14 Javascript
微信小程序引用iconfont图标的方法
Oct 22 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 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如何透过ODBC来存取数据库
2006/10/09 PHP
PHP脚本的10个技巧(3)
2006/10/09 PHP
smtp邮件发送一例
2006/10/09 PHP
关于js与php互相传值的介绍
2013/06/25 PHP
php遍历目录方法小结
2015/03/10 PHP
变量在 PHP7 内部的实现(二)
2015/12/21 PHP
php简单中奖算法(实例)
2017/08/15 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
javascript 数组排序函数sort和reverse使用介绍
2013/11/21 Javascript
javascript制作坦克大战全纪录(2)
2014/11/27 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
Vue.js 十五分钟入门图文教程
2018/09/12 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
下载糗事百科的内容_python版
2008/12/07 Python
Python中isnumeric()方法的使用简介
2015/05/19 Python
python3.5仿微软计算器程序
2020/03/30 Python
python3设计模式之简单工厂模式
2017/10/17 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
Python 变量的创建过程详解
2019/09/02 Python
Python Merge函数原理及用法解析
2020/09/16 Python
巴西网上药店:Drogaria Araujo
2021/01/06 全球购物
CLR与IL分别是什么含义
2016/08/23 面试题
上班睡觉检讨书
2014/01/09 职场文书
倡议书格式范文
2014/04/14 职场文书
活动总结格式范文
2014/04/26 职场文书
团队口号大全
2014/06/06 职场文书
授权委托书
2014/09/17 职场文书
2014年物业公司工作总结
2014/11/22 职场文书
2014年初三班主任工作总结
2014/12/05 职场文书
水知道答案观后感
2015/06/08 职场文书