动态的在输入框边上显示可输入的剩余字符数

在页面输入框的边上显示可输入的剩余字符长度。

存在的问题：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>

转载于:https://www.cnblogs.com/68681395/archive/2009/03/12/1409828.html