textarea输入限制+字数统计
textarea输入限制+字数统计
Code<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>textarea输入限制+字数统计</title>
<script language="javascript">
function wordCount(_obj, _max){
var _total = _obj.value.length;
if(_total > _max) {
_obj.value = _obj.value.substr(0, _max);
} else {
document.getElementById("wordcount").innerHTML = _total + "/" + _max;
}
}
//显示统计字数
function showCount(_obj, _max) {
if(document.getElementById("wordcount").value == "" || document.getElementById("wordcount").value == undefined) {
document.getElementById("wordcount").innerHTML = _obj.value.length + "/" + _max;
}
document.getElementById("wordcount").style.display = "block";
document.getElementById("wordcount").style.left = getAbs(_obj).x + _obj.clientWidth - 50;
document.getElementById("wordcount").style.top = getAbs(_obj).y + _obj.clientHeight - 14;
}
//隐藏统计字数
function hiddenCount() {
document.getElementById("wordcount").style.display = "none";
}
//获取元素坐标
function getAbs(_obj) {
var abs = {x:0,y:0};
while(_obj != document.body){
abs.x += _obj.offsetLeft;
abs.y += _obj.offsetTop;
_obj = _obj.offsetParent;
}
return abs;
}
</script>
<style>
.wordcount {
position:absolute;
font-size:9pt;
color:#4586b5;
width:50px;
text-align:right;
display:none;
}
</style>
</head>
<body>
<center>
<textarea rows="8" cols="60" onpropertychange="wordCount(this, 100)" onfocus="showCount(this, 100)" onblur="hiddenCount()">123</textarea>
<div class="wordcount" id="wordcount"></div>
</center>
</body>
</html>
