lengthcheck

< script > ...
function lengthCheck(ctrlId,max)
                   ...{
                    var oControl = ctrlId;

                    //var oX = oControl.getBoundingClientRect().left; 
                    //var oY = oControl.getBoundingClientRect().top;

                    var oX = getAbsoluteLeft(oControl);
                    var oY = getAbsoluteTop(oControl);
                    
                    //if(cuntrId!=null){
                        var oCounter = document.getElementById('dCounter');    
                        oCounter.style.display='block';
                    //}
                    
                    if(oControl.value.length > max)...{
                        oControl.value = oControl.value.substr(0,max);
                    }

                    if(oCounter!=null)...{
                        oCounter.innerHTML = max - oControl.value.length;
                        oCounter.style.left = oX-20; 
                        oCounter.style.top = oY-20;
                    }
                }

                function lengthCheckOver(ctrlId,max)
                ...{
                        var oControl = ctrlId;

                        //var oX = oControl.getBoundingClientRect().left; 
                        //var oY = oControl.getBoundingClientRect().top;

                        var oX = getAbsoluteLeft(oControl);
                        var oY = getAbsoluteTop(oControl);

                        //if(cuntrId!=null){
                            var oCounter = document.getElementById('dCounter');    
                        //}
                        
                        if(oControl.value.length > max)...{
                            oControl.value = oControl.value.substr(0,max);        
                        }

                        if(oCounter!=null)...{
                            oCounter.innerHTML = max - oControl.value.length;
                            oCounter.style.left = oX-20;
                            oCounter.style.top = oY-20;
                            oCounter.style.display='none';
                        }
                            
                }

                function getAbsoluteLeft(ob)
                ...{
                 if(!ob)...{return null;}
                   var obj = ob;
                   var objLeft = obj.offsetLeft;
                   while(obj!= null && obj.offsetParent != null && obj.offsetParent.tagName != "BODY" )...{
                     //alert('obj='+obj+'  obj.offsetParent='+obj.offsetParent+' '+'obj.offsetParent.tagName='+obj.offsetParent.tagName);
                     objLeft += obj.offsetParent.offsetLeft;
                     obj = obj.offsetParent;
                   }   
                 return objLeft ;
                }

                function getAbsoluteTop(ob)
                ...{
                 if(!ob)...{return null;}
                 var obj = ob;
                 var objTop = obj.offsetTop;
                 while(obj != null && obj.offsetParent != null && obj.offsetParent.tagName != "BODY" )...{
                   //alert('obj='+obj+'  obj.offsetParent='+obj.offsetParent+' '+'obj.offsetParent.tagName='+obj.offsetParent.tagName);
                   objTop += obj.offsetParent.offsetTop;
                   obj = obj.offsetParent;
                 }
                 return objTop ;
                }
</ script >

< html >
< body >
< head ></ head >
< form >
      < table >
            < tr >
                < td >< input  type ="text"  name ="test"  id ="id_test"  onkeyup ="lengthCheck(this,20);" onfocus ="lengthCheck(this,20);"  onblur ="lengthCheckOver(this,20);" ></ td >
            </ tr >
      </ table >

</ form >
< div  id =dCounter  align =center  style ="display:none;position:absolute;left:5px;background-color:#eeeeee;color:#999999;font-size:12px;border:1px solid #aaaaaa;" ></ div >
</ body >
</ html >