设为首页收藏本站

PHPIN.NET

 找回密码
 立即注册
查看: 880|回复: 0

[jQuery/Js/AJAX] jQuery实现textarea文本框自动显示剩余字数

[复制链接]

374

主题

381

帖子

2558

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2558
发表于 2014-4-23 22:12:31 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
jQuery实现textarea文本框自动显示剩余字数

积累知识点:maxlength控制大小,回车算作两个字符。

Demo代码如下:
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Demo</title>
  5. <style>
  6. *{padding:0;margin:0;font-size:14px;font-style:'隶书'}
  7. #wrap{width:400px;height:100px;position:relative;}
  8. #myText{width:400px;height:100px;resize:none;}
  9. .inner{position:absolute;right:20px;bottom:0;}
  10. .number{color:red;font-size:25px;}
  11. </style>
  12. </head>
  13. <body>
  14. <div id="wrap">
  15. <textarea maxlength="50" id="myText" placeholder="请输入评论..." ></textarea>
  16. <span class="inner">您还可以输入<em class="number">50</em>个字</span>
  17. </div>
  18. <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  19. <script>
  20. $(function(){
  21. var max_num = $("#myText").attr("maxlength");
  22. $("#myText").bind("input",function(){
  23. var cur_num = $(this).val().replace(/\n/g,'  ').length;
  24. var left_num = max_num - cur_num;
  25. $(".number").text(left_num);
  26. });
  27. });
  28. </script>
  29. </body>
  30. </html>
复制代码


转自w3cfuns,感谢分享!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|PHPIN.NET ( 冀ICP备00000001号 )|网站地图  

GMT+8, 2016-12-10 20:44

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表