熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

jquery實現微博文字輸入框 輸入時顯示輸入字數 效果實現

2013-11-15 12:02:09  來源: JSP教程 
這篇文章介紹了用jquery實現微博文字輸入框 輸入時顯示輸入字數的效果有需要的朋友可以參考一下  

  效果如下

  

  代碼如下

復制代碼 代碼如下:
<html xmlns="
<head>
<meta httpequiv="ContentType" content="text/html; charset=utf" />
<style>
taDetail{height: px; width:px; textalign:left; verticalalign:top;}
#divShowNum{ fontsize:px;
  width: px;
  height: px;
  border: none;
  padding: px;
  paddingbottom: px;
  display: none;
  position:absolute;
 }
</style>
<script type="text/javascript" src="js/jqueryminjs"; ?>" ></script>
<script type="text/javascript" src="js/jquerytoolsminjs"; ?>" ></script>
<script>
$(document)ready(function(){
  $("taDetail")bind("click"showNum)
  bind("keyup" showNum)
  bind("blur" function(){$("#divShowNum")hide();});
});
var showNum = function(){
 var d = $(this);
 var pos = doffset();
 var t = postop +  thisoffsetHeight ; // 彈出框的下邊位置
 var l = posleft  + thisoffsetWidth ;  // 彈出框的右邊位置
 var num = thisvaluelength;
 $("#changeNum")html(num);
 $("#divShowNum")css({ "top": t "left": l })show();
}
</script>
</head>
<body>
<textarea class="taDetail" ></textarea>
<br/>
<textarea class="taDetail" ></textarea>
<div id="divShowNum" ><span id="changeNum"></span>/</div>
</body>
</html>
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20134.html
  • 上一篇文章:

  • 下一篇文章:
  • 推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.