本文介绍了一个使用JavaScript实现的字数限制提示功能。该功能通过实时更新显示已输入字符数量及剩余字符数，帮助用户控制文本区域内的输入长度，避免超出预设范围。
本人今天写好的一段js的验证。分享下
demo.html
1
<html>2
<head>3
<script type="text/javascript" src="Jquery.js"> </script>4
<script type="text/javascript" src="StrLeng.js"> </script>5
<script type="text/javascript">
6
$().ready(function(){7
StrLeng("textarea",100);8
});9
</script>10
</head>11
<body>12
13
<textarea id="textarea" style="height:100px;"></textarea>14
</body>15
</html>
StrLeng.js
1
function StrLeng(id,leng)2
{3
var dom = $("#"+id);4
var left = SL_getLeft(id)+dom.width()+10;5
var top = SL_getTop(id)+dom.height()-10;6
7
$(document.body).append("<div id=\"strLeng\" style=\"position:absolute;top:"+top+"px; left:"+left+"px;\"><strong id=\"strongColor\" style=\"color:Fuchsia\">"+getBytesLength(dom.val())+"</strong><strong style=\"color:Gray\">/"+leng+"</strong></div>");8
9
dom.keyup(function(){10
$("#strongColor").text(getBytesLength(this.value));11
if(getBytesLength(this.value)>=leng)12
{13
$("#strongColor").attr("style","color:Red");14
}15
else16
{17
$("#strongColor").attr("style","color:Fuchsia");18
}19
});20
}21
22
23
function SL_getLeft(id) {24
25
var obj = $('#'+id)[0];26
var left = obj.offsetLeft;27
var parent = obj.offsetParent;28
29
while(parent) {30
left += parent.offsetLeft;31
parent = parent.offsetParent;32
}33
34
return left35
}36
37
function SL_getTop(id) {38
var obj = $('#'+id)[0];39
var top = obj.offsetTop;40
var parent = obj.offsetParent;41
42
while(parent) {43
top += parent.offsetTop;44
parent = parent.offsetParent;45
}46
47
return top;48
}49
50
function getBytesLength(str) {51
// 在GBK编码里，除了ASCII字符，其它都占两个字符宽52
return str.replace(/[^\x00-\xff]/g, 'xx').length;53
}54
55
图片：
扫一扫
483
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
