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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="artTxtCount.js"></script>
<style>
/* demo */
body { font-size:75%; font-family:'微软雅黑'; }
#demo { width:500px; }
#demo .help, #demo .help a { color:#999; }
#demo form { margin:20px 0; padding:8px; background:#F4F4F4; border:1px solid #EDEDED; }
#demo .tips { color:#999; padding:0 5px; }
#demo .tips strong { color:#1E9300; }
#demo .tips .js_txtFull strong { color:#F00; }
#demo textarea.text { width:474px; }
</style>
</head>
<script type="text/javascript">
$(document).ready(function(){
$(".autoTxtCount").each(function(){
$(this).find(".text").artTxtCount($(this).find('.tips'),120); });
$("#test").artTxtCount($("#test_tips"),10) });
</script>
<body>
<div id="demo">
<h1>artTxtCount - 轻量级输入字数提示插</h1>
<form class="autoTxtCount" action="" method="get">
<div>
<textarea class="text" name="" cols="50" rows="3"></textarea>
</div>
<div>
<button type="submit">提交</button>
<span class="tips"></span> </div>
</form>
<form class="autoTxtCount" action="" method="get">
<div>
<textarea class="text" name="" cols="50" rows="3"></textarea>
</div>
<div>
<button type="submit">提交</button>
<span class="tips"></span> </div>
</form>
<form action="" method="get">
<input class="text" id="test" name="" type="text" />
<span id="test_tips" class="tips"></span><br />
<button type="submit">提交</button>
</form>
</div>
</body>
</html>
以下是 artTxtCount.js
(function($){
$.fn.artTxtCount=function(tipWrap, maxNumber){
var countClass = 'js_txtCount', // 定义内部容器的CSS类名
fullClass = 'js_txtFull', // 定义超出字符的CSS类名
disabledClass = 'disabled'; // 定义不可用提交按钮CSS类名 var count=function(){ var btn=$(this).closest('form').find(':submit');
var val=$(this).val().length;
var disabled={
on:function(){
btn.removeAttr('disabled').removeClass("disabled");
},
off:function(){
btn.attr('disabled', 'disabled').addClass(disabledClass);
}
}
if (val==0) disabled.off();
if(val<=maxNumber){
if(val>0) disabled.on();
tipWrap.html('<span class="' + countClass + '">\u8FD8\u80FD\u8F93\u5165 <strong>' + (maxNumber - val) + '</strong> \u4E2A\u5B57</span>');
}
else{
disabled.off();
tipWrap.html(maxNumber - val);
}
}; $(this).bind('keyup change', count); return this; } })(jQuery);
jquery 限制字数 显示输入字数 插件的更多相关文章
- jQuery 写的textarea输入字数限制
//先判断浏览器是不是万恶的IE var bind_name = 'input';//默认事件 if (navigator.userAgent.indexOf(" ...
- Jquery 限制文本框输入字数【转】
<script type="text/javascript" src="js/jquery.min.js" ></script> < ...
- jquery实现限制textarea输入字数
ie中可用onpropertychange监听改变事件 火狐和谷歌可用oninput监听改变事件 综合: //使系统中class='text-length'的输入框只能输入200字符(主要用于text ...
- jquery插件artTxtCount输入字数限制,并提示剩余字数
工作中用到,需要批量处理下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- jquery插件——仿新浪微博限制输入字数的textarea
内容链接地址:http://www.cnblogs.com/jone-chen/p/5213851.html: <!DOCTYPE html> <html> <head& ...
- 监听文本框输入开发仿新浪微博限制输入字数的textarea插件
监听文本框输入 Firefox.Chrome.IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件. oninput 事件在用户输入.退 ...
- 文本域textarea显示输入剩余字数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- android中实现在矩形框中输入文字,可以显示剩余字数的功能
虽然这两个功能都比较简单,但是在实际app开发中真的很常见,特别是显示字数或剩余字数这个功能 如下图: 要实现上面的功能,需要做到三点: 1.实现矩形框布局 思路就是矩形框作为整个布局的一个backg ...
- Form表单,textarea标签输入框 字数限制,和已输入字数的统计显示
<script type="text/javascript"> $(document).ready(function() { <%-- 页面进来时就调用 --%& ...
随机推荐
- bzoj2052: Pku1777 Vivian
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2052 2052: Pku1777 Vivian Time Limit: 10 Sec M ...
- IOS中实例的权限控制
@public.@protected.@private的使用 在OC中声明一个类的时候,可以使用上面 @public.@protected.@private三个关键字声明实例的权限,例如下面的代码: ...
- zookeeper(1)
参考文档:zookeeper中文网 一.介绍安装 zookeeper 是一个高效的分布式协调服务,它暴露了一些公用服务,比如命名/配置/同步控制/群组服务等.我们可以使用ZK来实现一些功能,例如:达成 ...
- MC- 交易并设置止损
using System; using System.Drawing; using System.Linq; using PowerLanguage.Function; using ATCenterP ...
- ubuntu下打开chm文件
CHM文件格式是微软1998年推出的基于HTML文件特性的帮助文件系统,以替代早先的WinHelp帮助系统,它在Windows 98中把CHM类型文件称作“已编译的HTML帮助文件”. chm文件因为 ...
- RHCE备考倒计时
2014年7月31日 周四 上海考试 认证RHCE6
- Channel Allocation(DFS)
Channel Allocation Time Limit : 2000/1000ms (Java/Other) Memory Limit : 20000/10000K (Java/Other) ...
- nginx: 响应体太大
如果做proxy,可以将proxy配置修改buffer长度,或者直接关闭buffer.http { proxy_buffer_size 128k; proxy_buffers 4 256k; prox ...
- GRPC: set up..
get the grpc source file.. git clone https://github.com/grpc/grpc git submodule update --init --recu ...
- Sql sever 常用语句(续)
distintct: 查询结果排除了重复项(合并算一项)--如查姓名 select distinct ReaName from UserInfo 分页语句:(查询区间时候应该查询出行号,作为分页的 ...