微博输入字数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css">
<title>微博输入字数</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:14px;}
.fl{float:left;}
.fr{float:right;}
.clear{clear:both;}
.blog{margin:30px auto;padding:10px;border:8px solid pink;width:500px;}
.title{width:100%;height:30px;line-height: 30px;}
.text{width:100%;height:100px;}
.bottom{margin:10px auto;}
.bottom span{margin-right:10px;}
.btn{width:70px;}
</style>
</head>
<body>
<div class="blog">
<div class="title"><span class="fl">有什么新鲜事想告诉大家</span><span class="fr">还可以输入<span id="num">200</span>字</span></div>
<div class="clear"></div>
<div>
<textarea class="text"></textarea>
</div>
<div class="bottom">
<span><i class="fa fa-user" style="color:pink"></i> 表情</span>
<span><i class="fa fa-image" style="color:red"></i> 图片</span>
<span><i class="fa fa-video-camera" style="color:blue"></i> 视频</span>
<span><i class="fa fa-coffee"></i> 话题</span>
<span><i class="fa fa-keyboard-o"></i> 长微博</span>
<span style="margin-left:70px">公开</span>
<button class="fr btn" disabled="disabled">发布</button>
</div>
</div>
<script>
$(function(){
$('.text').keyup(function(){
$textlen=$(this).val().length;
$stextlen=200-$textlen;
$('#num').text($stextlen);
$('.btn').removeAttr('disabled');
console.log($textlen)
if($textlen<=0){
$s('.btn').attr('disabled','true');
}
})
})
</script>
</body>
</html>