这篇文章介绍了用jquery实现微博文字输入框 输入时显示输入字数的效果
有需要的朋友可以参考一下
效果如下
代码如下
复制代码 代码如下:
<html xmlns="
<head>
<meta http
equiv="Content
Type" content="text/html; charset=utf
" />
<style>
taDetail{height:
px; width:
px; text
align:left; vertical
align:top;}
#divShowNum{ font
size:
px;
width:
px;
height:
px;
border: none;
padding:
px;
padding
bottom:
px;
display: none;
position:absolute;
}
</style>
<script type="text/javascript" src="js/jquery
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(){$("#divShowNum")
hide();});
});
var showNum = function(){
var d = $(this);
var pos = d
offset();
var t = pos
top + this
offsetHeight
; // 弹出框的下边位置
var l = pos
left + this
offsetWidth
; // 弹出框的右边位置
var num = this
value
length;
$("#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>
