如果文本框太大直到一定大小，如何调整文本框的大小 [英] How to resize text in a textbox if it is too large till a certain size

问题描述

https://auth.me.com/authenticate

在此网站上输入电子邮件地址时，如果电子邮件地址填满框号，则字体大小将自动减小.

• 我们如何使用Javascript来做同样的事情?

• 正在触发/捕获的事件是什么?

解决方案

我制作了一个名为 resize.js 的库，该库可以编写:

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

---

这是图书馆:

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";
    }
}

小提琴: http://jsfiddle.net/mageek/GEp2y/1

---

一些建议:

• 如果属性调整大小"等于true或未设置，则文本框将像普通文本框一样.
• 您可以通过设置"max"和"min"属性来设置允许的最大字体大小和最小字体大小.默认情况下，最大值是当前字体大小，最小值是小于最大值的3种大小.
• 我添加了一些内容，例如 https://auth.me.com/authenticate ，该内容删除了达到最小字体大小时填充以获取空间.
• 有一个变量"precision"(在resize.js的开头)取决于文本框，我将其设置为18作为默认文本框，但是如果您修改文本框的样式，则(可能需要通过测试)将变量修改为更好的值.
• 我不保证像摆弄小提琴一样在网站上托管resize.js，您应该将源代码复制到一个新文件中并保存.

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 ?

解决方案

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.

这篇关于如果文本框太大直到一定大小，如何调整文本框的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！