免费注册 查看新帖 |

Chinaunix

  平台 论坛 博客 文库
最近访问板块 发新帖
查看: 1634 | 回复: 0
打印 上一主题 下一主题

textarea输入限制+字数统计(JQuery版),练习JQuery [复制链接]

论坛徽章:
0
跳转到指定楼层
1 [收藏(0)] [报告]
发表于 2011-12-22 08:54 |只看该作者 |倒序浏览
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

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

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


您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

  

北京盛拓优讯信息技术有限公司. 版权所有 京ICP备16024965号-6 北京市公安局海淀分局网监中心备案编号:11010802020122 niuxiaotong@pcpop.com 17352615567
未成年举报专区
中国互联网协会会员  联系我们:huangweiwei@itpub.net
感谢所有关心和支持过ChinaUnix的朋友们 转载本站内容请注明原作者名及出处

清除 Cookies - ChinaUnix - Archiver - WAP - TOP