<!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 限制字数 显示输入字数 插件的更多相关文章
	

    
								
  1. jQuery 写的textarea输入字数限制
		
    //先判断浏览器是不是万恶的IE        var bind_name = 'input';//默认事件        if (navigator.userAgent.indexOf(" ...
    
		
    2. 
						
  2. Jquery 限制文本框输入字数【转】
		
    <script type="text/javascript" src="js/jquery.min.js" ></script> < ...
    
		
    3. 
						
  3. jquery实现限制textarea输入字数
		
    ie中可用onpropertychange监听改变事件 火狐和谷歌可用oninput监听改变事件 综合: //使系统中class='text-length'的输入框只能输入200字符(主要用于text ...
    
		
    4. 
						
  4. jquery插件artTxtCount输入字数限制,并提示剩余字数
		
    工作中用到,需要批量处理下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
    
		
    5. 
						
  5. jquery插件——仿新浪微博限制输入字数的textarea
		
    内容链接地址:http://www.cnblogs.com/jone-chen/p/5213851.html: <!DOCTYPE html> <html> <head& ...
    
		
    6. 
						
  6. 监听文本框输入开发仿新浪微博限制输入字数的textarea插件
		
    监听文本框输入 Firefox.Chrome.IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件. oninput 事件在用户输入.退 ...
    
		
    7. 
						
  7. 文本域textarea显示输入剩余字数
		
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
		
    8. 
						
  8. android中实现在矩形框中输入文字，可以显示剩余字数的功能
		
    虽然这两个功能都比较简单,但是在实际app开发中真的很常见,特别是显示字数或剩余字数这个功能 如下图: 要实现上面的功能,需要做到三点: 1.实现矩形框布局 思路就是矩形框作为整个布局的一个backg ...
    
		
    9. 
						
  9. Form表单，textarea标签输入框 字数限制，和已输入字数的统计显示
		
    <script type="text/javascript"> $(document).ready(function() { <%-- 页面进来时就调用 --%& ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. deepin2014.1安装搜狗后却找不到图标及配置
			
    点开Input Method Configration; 点左下角添加输入法; 将Only  Ohow Current Language前 的勾去掉,选择出现的搜狗输入法. FYI.
    
			
    2. 
						
  2. 一、链接Sql Server2014提示找不到实例的问题解决方案
			
    在登录数据库时,确认数据库地址.用户名.密码正确的情况下,却报如下错误,则说明目标数据库服务器有相应的服务未启动. 在目标数据库服务器中打开服务列表: 找到SQL Server(****)服务(括号中 ...
    
			
    3. 
						
  3. 直接粘贴代码到网络上:command-line pastebins
			
    软件作用 直接把管道里面的文字内容传到网站上面,然后反馈一个地址可以读取内容. 同类软件 wgetpaste dpaste pastebin pasteie 用法 介绍wgetpaste为例: GEN ...
    
			
    4. 
						
  4. Hadoop作业优化
			
    mapper数量 reduce数量 combiner 中间值压缩 自定义序列 调整shuffle,减少溢出写 关闭推测执行 任务JVM重用 慢启动reduce
    
			
    5. 
						
  5. 与导航栏下控件的frame相关的edgesForExtendedLayout、translucent、extendedLayoutIncludesOpaqueBars、automaticallyAdjustsScrollViewInsets等几个属性的详解
			
    在引入了导航控制器UINavigationController和分栏控制器UITabBarController之后,我们在设置控件的frame的时候就需要注意避开导航栏UINavigationBar  ...
    
			
    6. 
						
  6. 2.Thread中的实例方法
			
    (转自:http://www.cnblogs.com/xrq730/p/4851233.html) Thread类中的方法调用方式: 1.this.XXX 这种调用方式表示的线程是:线程实例本身 2. ...
    
			
    7. 
						
  7. Mysql CPU占用高的问题解决方法小结
			
    通过以前对mysql的操作经验,先将mysql的配置问题排除了,查看msyql是否运行正常,通过查看mysql data目录里面的*.err文件(将扩展名改为.txt)记事本查看即可.如果过大不建议用 ...
    
			
    8. 
						
  8. 线程池Executors探究
			
    线程池用到的类在java.util.concurrent包下,核心类是Executors,通过其不同的几个方法可产生不同的线程池. 1.生成固定大小的线程池 public static Executo ...
    
			
    9. 
						
  9. android 联网
			
    <?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="htt ...
    
			
    10. 
						
  10. Loadrunner中参数和变量的使用
			
    //字符串复制strcpy(str,"Hello ") ; //字符串连接strcat(str,"World !");lr_message("str: ...
    
			
    11.