jQuery实现textarea文本框自动显示剩余字数
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，感谢分享！
页:
[1]