Chinaunix首页 | 论坛 | 博客

飞车兔qyf404.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

qyf404

  • 博客访问： 539070
  • 博文数量： 59
  • 博客积分： 1169
  • 博客等级： 少尉
  • 技术积分： 572
  • 用 户 组： 普通用户
  • 注册时间： 2011-04-01 18:03
个人简介

信息量太大，每天疲于辨别信息得真伪。

文章分类

全部博文（59）

文章存档

2016年（1）

2014年（9）

2013年（1）

2011年（48）

我的朋友
最近访客
推荐博文
相关博文
textarea输入限制+字数统计(JQuery版)，练习JQuery

分类： 系统运维

2011-07-21 13:25:53

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

  3. <html>
  4. <head>
  5. <title>Untitled</title>
  6. <script src="jquery-1.3.2.js"></script>
  7. <script src="jquery-1.3.2.min.js"></script>
  8. <script language="javascript">
  9. $(function(){
  10.     jQuery.fn.extend({
  11.         showWordCount: function() {
  12.             var _max = $(this).attr('max');
  13.             var _length = $(this).text().length;
  14.             if(_length > _max) {
  15.                 $(this).text($(this).text().substring(0, _max));
  16.             }
  17.             _left = $(this).offset().left;
  18.             _top = $(this).offset().top;
  19.             _width = $(this).width();
  20.             _height = $(this).height();
  21.             $('#div_1').html(_length + '/' + _max);
  22.             $('#div_1').css({
  23.                 'left':_left + _width - 60,
  24.                 'top':_top + _height - 8
  25.             });
  26.         }
  27.     });
  28.     
  29.     $('textarea').bind('propertychange', function() {
  30.         $(this).showWordCount();
  31.     });
  32.     
  33.     $('textarea').focus(function(){
  34.         $(this).showWordCount();
  35.         $('#div_1').fadeIn('slow');
  36.     });
  37.     
  38.     $('textarea').blur(function(){
  39.            $('#div_1').fadeOut('slow');
  40.     });
  41. });
  42. </script>
  43. <style>
  44. .div_1 {
  45.     position:absolute;
  46.     font-size:9pt;
  47.     color:#4586b5;
  48.     width:50px;
  49.     text-align:right;
  50.     display:none
  51. }
  52. </style>
  53. </head>

  55. <body>
  56. <center>
  57. <textarea id="textarea_1" cols=50 rows=10 max="100">123</textarea>
  58. <div id="div_1" class="div_1">123</div>
  59. </center>
  60. </body>
  61. </html>


阅读(4576) | 评论(0) | 转发(0) |
0

上一篇：翻页的策略

下一篇：介绍一个十分好用的JQUERY图片放大镜插件

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6