|
|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有账号？立即注册
x
jQuery实现textarea文本框自动显示剩余字数
积累知识点：maxlength控制大小，回车算作两个字符。
Demo代码如下：
- <!doctype html>
- <html>
- <head>
- <title>Demo</title>
- <style>
- *{padding:0;margin:0;font-size:14px;font-style:'隶书'}
- #wrap{width:400px;height:100px;position:relative;}
- #myText{width:400px;height:100px;resize:none;}
- .inner{position:absolute;right:20px;bottom:0;}
- .number{color:red;font-size:25px;}
- </style>
- </head>
- <body>
- <div id="wrap">
- <textarea maxlength="50" id="myText" placeholder="请输入评论..." ></textarea>
- <span class="inner">您还可以输入<em class="number">50</em>个字</span>
- </div>
- <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
- <script>
- $(function(){
- var max_num = $("#myText").attr("maxlength");
- $("#myText").bind("input",function(){
- var cur_num = $(this).val().replace(/\n/g,' ').length;
- var left_num = max_num - cur_num;
- $(".number").text(left_num);
- });
- });
- </script>
- </body>
- </html>
转自w3cfuns，感谢分享！ |
|
发表于 2014-4-23 22:12:31
