2025-02-15

 

效果如下:

 

 

代碼如下:

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>

.taDetail{height: 50px; width:350px; text-align:left; vertical-align:top;}

#pShowNum{ font-size:14px;

  width: 50px;

  height: 18px;

  border: none;

  padding: 5px;

  padding-bottom: 15px;

  display: none;

  position:absolute;

 }

</style> www.aiwalls.com

<script type="text/javascript" src="js/jquery-1.7.1.min.js"; ?>" ></script>

<script type="text/javascript" src="js/jquery.tools.min.js"; ?>" ></script>

<script>

$(document).ready(function(){

  $(".taDetail").bind("click",showNum)

  .bind("keyup", showNum)

  .bind("blur", function(){$("#pShowNum").hide();});

});

 

var showNum = function(){

 var d = $(this);

 var pos = d.offset();

 var t = pos.top +  this.offsetHeight – 22; // 彈出框的下邊位置

 var l = pos.left  + this.offsetWidth – 60;  // 彈出框的右邊位置

 var num = this.value.length;

 $("#changeNum").html(num);

 $("#pShowNum").css({ "top": t, "left": l }).show();

}

 

</script>

</head>

<body>

<textarea class="taDetail" ></textarea>

<br/>

<textarea class="taDetail" ></textarea>

<p id="pShowNum" ><span id="changeNum"></span>/140</p>

</body>

</html>

 

摘自 tool163的專欄

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *