0

https://auth.me.com/authenticate

在本网站上，当您输入您的电子邮件地址时，如果电子邮件地址填满了框大小，字体大小将自动减小。

在此处输入图像描述

在此处输入图像描述

在此处输入图像描述

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

  • 哪些事件被触发/捕获？

4

5 回答 5

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

Keydown 是您正在寻找的

于 2012-06-17T14:43:42.037 回答
1

我已经为您制作了代码，例如我在自己的网站上为联系表格所做的：<textarea>如果有很多文本，它会变得更高。

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

的HTML 

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

<input>我们为 the和 the设置相同字体大小<div>并隐藏 the的 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')
        }
    }
})​

这是jsFiddle。

于 2012-06-17T15:25:13.593 回答
1

我创建了一个名为 的库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 在网站上的主机就像小提琴一样，你应该将源代码复制到一个新文件中并保存。
于 2012-06-22T22:09:38.923 回答
0

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

于 2012-06-17T14:42:12.037 回答
0

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

  • 计算有多少个字母可以装进盒子里——你知道文本框的宽度。你知道这里给出的字体大小和填充。所以你知道在它溢出之前可以在文本框中输入多少个字母（不完全是）。

  • 或者你可以随便输入字母，看看能装多少！:)

  • 好吧，如果您有时间，您还可以深入研究当您按下电子邮件地址文本框时触发的事件。你会学到很多东西！

于 2012-06-17T15:00:34.047 回答