在页面输入框的边上显示可输入的剩余字符长度。
存在的问题:1、如果需要在校验长度的同时还需校验其他类型则会出现重复显示。2、动态提示框不能显示在下边,左边等边等,只能显示在右边。最好实现可以根据浏览器情况动态显示位置。
function fetchOffset(obj) {
var left_offset = obj.offsetLeft;
var top_offset = obj.offsetTop;
var width_offset =obj.offsetWidth;
var height_offset = obj.offsetHeight;
while((obj = obj.offsetParent) != null) {
left_offset += obj.offsetLeft;
top_offset += obj.offsetTop;
}
return { 'left' : left_offset, 'top' : top_offset,'width' :width_offset,'height':height_offset };
}
var __msgTimer=null;
function CheckLength(src,min,max){
src =$(src);
if(src){
var ___msgViewid="___msgView";
var offset =fetchOffset(src);
var ___msgView = $(___msgViewid);
if(!___msgView){
___msgView = document.createElement("div");
___msgView.id=___msgViewid;
___msgView.style.position="absolute";
___msgView.style.color="red";
___msgView.style.background="white";
document.body.appendChild(___msgView);
}
___msgView.style.top =(offset.top+2)+"px";
___msgView.style.left=(offset.left + offset.width)+"px";
var __msg= "";
var curLen=src.value.len();
// window.status =curLen + "top:" +___msgView.style.top +"|left:"+___msgView.style.left;
if(min && min>0 && min > curLen){
__msg ="长度必须不少于"+min+"位";
window.clearTimeout(__msgTimer);
}
else if(max && max >0 && max <curLen)
{
__msg ="长度不能大于"+max+"位";
window.clearTimeout(__msgTimer);
}
else if(max && max >0 && max >curLen){
__msg ="还可以输入"+(max -curLen)+"个字符";
}
else
{
__msg ="已达到允许的最大长度";
window.clearTimeout(__msgTimer);
__msgTimer=window.setTimeout(function(){___msgView.style.display='none';},3000);
}
___msgView.style.display="block";
___msgView.innerHTML =__msg;
}
else
{
window.status ="深潭碧波,寂清静宁!";
}
}
页面上调用方式:
<asp:TextBox ID="txt_Password" runat="server" οnkeyup="CheckLength(this,6,20);" TextMode="Password"
MaxLength="20"></asp:TextBox>