Question

https://auth.me.com/authenticate

On this website when you type in your email address , the font-size will automatically be reduced if the email address fills the box size.

• How can we do the same using Javascript?

• which are the events that are being fired / captured ?

Answer 1

I have made a library, named resize.js, which allow to write:

<input type="text" resize="true" />

---

This is the library:

var precision=18;

window.onload=function()
{
    for(var i=0,t=document.getElementsByTagName("input"),l=t.length;i<l;i++)if(t[i].getAttribute("resize")==="true")
    {
        var div=document.createElement("div");
        div.setAttribute("style","font-size"+parseInt(t[i].s("font-size"))+";font-family:"+t[i].s("font-family")+";position:absolute;top:-10000px;left:-10000px;");
        document.body.appendChild(div);
        (function(i,div,min,max,dif,l,r,w,h,pre){setInterval(function(){modify(t[i],div,min,max,dif,l,r,w,h,pre);},100);})
        (
            i,
            div,
            t[i].getAttribute("min")||parseInt(t[i].s("font-size"))-3,
            t[i].getAttribute("max")||parseInt(t[i].s("font-size")),
            parseInt(t[i].s("padding-left"))+parseInt(t[i].s("padding-right"))+parseInt(t[i].s("border-left-width"))+parseInt(t[i].s("border-right-width"))+precision,
            parseInt(t[i].s("padding-left")),
            parseInt(t[i].s("padding-right")),
            t[i].offsetWidth,
            t[i].offsetHeight,
            precision
        );
    }
}
Object.prototype.s=function(p)
{
    return this.currentStyle?this.currentStyle[p]:document.defaultView.getComputedStyle(this,null).getPropertyValue(p);
}
function modify(el,c,min,max,dif,l,r,w,h,pre)
{
    el.style.width=w+"px";
    el.style.height=h+"px";
    c.innerHTML=el.value.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/ /g,"&nbsp");
    var test=c.offsetWidth;
    while(test>=el.offsetWidth-dif&&parseInt(el.s("font-size"))>min)
    {
        el.style.fontSize=parseInt(el.s("font-size"))-1+"px";
        c.style.fontSize=el.style.fontSize;
        test=c.offsetWidth;
    }
    while(test<el.offsetWidth-dif&&parseInt(el.s("font-size"))<max)
    {
        el.style.fontSize=parseInt(el.s("font-size"))+1+"px";
        c.style.fontSize=el.style.fontSize;
        test=c.offsetWidth;
    }
    if(parseInt(el.s("font-size"))===min&&c.offsetWidth>el.offsetWidth-dif)
    {
        el.style.paddingLeft="0px";
        el.style.paddingRight="0px";
    }
    else
    {
        el.style.paddingLeft=l+"px";
        el.style.paddingRight=r+"px";
    }
}

A fiddle: http://jsfiddle.net/mageek/GEp2y/1

---

Some advices:

• If the attribute “resize” equals anything other than true, or is not set, the text-box will behave as a normal text-box.
• You can set the maximum font-size and the minimum font-size allowed by setting the “max” and the “min” attributes. By default, the maximum is the current font-size and the minimum is 3 sizes smaller than the maximum.
• I added something, like https://auth.me.com/authenticate, which removes the padding to gain space when the minimum font-size is reached.
• There is the variable ‘precision’ (at the beginning of resize.js) that depends on the text-box, I set it to 18 for default text-box but if you modify the style of the text-box, you will maybe have to modify the variable to a better value (by testing).
• I don’t ensure the host of resize.js on the website like in the fiddle, you should copy the source code in a new file and save it.