jquery实现微博文章输入字数统计

原创于 2021-05-10 20:41:10 发布 · 679 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #js #html

本文介绍了一个简单的网页应用，该应用使用HTML、CSS和JavaScript实现了微博输入字数的实时计数功能。当用户在文本区域输入内容时，剩余可输入的字符数会即时更新并显示出来。

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta  charset="utf-8" />
<style>
#comments{
  height: 150px; 
  width:350px; 
  text-align:left; 
  vertical-align:top;
}
#show{ 
  font-size:14px;
  width: 50px;
  height: 18px;
  border: none;
  padding: 5px;
  padding-bottom: 15px;
  display: none;
  position:absolute;
  /* border: 1px solid #ccc; */
 }
</style>
<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>

</head>
<body>
	<h1> 微博字数</h1>
  <div><textarea  id="comments"></textarea></div>
  <div id="show" ><span id="count"></span>/140</div>
	<script>
		 $(function(){
		 	 $("#comments").bind("click",showNum)
			 .bind("keyup", showNum)
			 .bind("blur", function(){$("#show").hide();});
		 });
		 var showNum = function(){
	   var pos = $(this).offset();     // pos=$("#comments").offset();
		 var t = pos.top + $(this).height() - 25; // 弹出框的下边位置
		 var l = pos.left + $(this).width() - 65;  // 弹出框的右边位置
		 var counter = $(this).val().length;
		 $("#count").text(counter);
		 $("#show").css({ "top": t, "left": l }).show();
		}
		//var t = pos.top +  this.offsetHeight - 22; //js写法
		// var l = pos.left  + this.offsetWidth - 60;  
		// var counter = this.value.length;
	</script>
</body>
</html>