Question

https://auth.me.com/authenticate

在您输入电子邮件地址时，在此网站上，如果电子邮件地址填写框大小，则会自动减小字体大小。

enter image description here

我们如何使用Javascript做同样的事情？
哪些是被解雇/被捕获的事件？

Answer 1

$("input").keypress(function(){
if(this.value.length>43)//or some other value
{//do stuff here
}
});

Keydown正是您所寻找的

Answer 2

我已经为你制作了代码，例如我在own website上为联系表单做了一些事情：<textarea>如果有很多文字就会变得更高。

要做的是为<div>中的每个keydown创建一个不可见的<input>，获取其内容并将其放入<div>，并检查其中width大于<input>的。{/ p>

HTML

<form>
    <input>
    <div></div>
</form>

我们为<input>和<div>设置相同字体大小的CSS，并隐藏<div>（position: absolute，因为我们需要它的宽度，我们不要不想让它改变布局。

form > * {
    font-size: 22px
}

form > input {
    width: 150px;
    font-size: 18px;
}

form > div {
    position: absolute;
    left: -10000px;
}

JavaScript（这里有jQuery）

var $form = $('form')
  , $input = $('input', $form)
  , $autoResize = $('div', $form)
  , $both = $input.add($autoResize)
  , fontSize = parseInt($input.css('font-size'), 10)

$input.on('keydown', function() {
    $autoResize.html(this.value.replace(/&/g, '&amp;')
                                .replace(/</g, '&lt;')
                                .replace(/>/g, '&gt;')
                                .replace(/ {2,}/g, function(spaces) {
                                    // Change the spaces to $nbsp; except the last one
                                    for (var i = 1, fakeSpaces = '', space; space = spaces[i++];) {
                                        fakeSpaces += '&nbsp;'
                                    }
                                    return fakeSpaces + ' '
                                })
                            )
    // We add 10px to be sure it doesn't stick to the edges
    if ($autoResize.outerWidth() >= $input.outerWidth() - 10) {
        do {
            $both.css('font-size', --fontSize)
        } while ($autoResize.outerWidth() >= $input.outerWidth() && fontSize > 10)
        // 10px is the smallest font-size accepted
        if (fontSize === 10) {
            $input.off('keydown')
        }
    }
})

这是the jsFiddle。

Answer 3

我创建了一个名为 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

一些建议：

如果属性“resize”等于true以外的任何值，或者未设置，则文本框将表现为普通文本框。
您可以通过设置“max”和“min”属性来设置允许的最大字体大小和最小字体大小。默认情况下，最大值是当前字体大小，最小值是小于最大值的3个大小。
我添加了一些内容，例如https://auth.me.com/authenticate，它会在达到最小字体大小时删除填充以获得空间。
变量'precision'（在resize.js的开头）依赖于文本框，我将其设置为18为默认文本框，但如果你修改文本框的样式，你可能必须将变量修改为更好的值（通过测试）。
我不保证网站上的resize.js主机就像在小提琴中一样，你应该将源代码复制到一个新文件中并保存。

Answer 4

您必须使用JavaScript来计算已输入的字符数（我相信在jQuery中使用.change()）并相应地更改字体大小。

Answer 5

是的，我认为@somebody遇到麻烦的是他们在这里做的事情。

计算框中适合的字母数 - 您知道文本框的宽度。你知道字体大小＆amp;这里给出的填充。所以你知道在文本框溢出之前可以输入多少个字母（不完全是这样）。
或者你可以输入随机字母＆amp;看看有多少可以适合！：）
好吧，如果你有时间，你也可以深入了解当你在电子邮件地址文本框上打字时被解雇的事件。你会学到很多东西！

如果文本框中的文本太大而直到某个大小，则如何调整其大小

5 个答案: