使用Javascript缩小用户输入的字体大小以适应输入

苹果的MobileMe使用Javascript在用户键入时更改其主页上电子邮件登录的字体大小，以便文本始终适合可用空间，而不会出现溢出滚动

虽然我知道如何在每个按键上执行一个函数，但我很好奇每次如何计算字体大小，使其始终适合输入字段。有没有办法用可变宽度的字体来测量文本的长度？他们是如何实现这一效果的

试试看我的意思：

---

我以前使用jQuery做过这件事。您可以这样测量一段文本的大小：

// txt is the text to measure, font is the full CSS font declaration,
// e.g. "bold 12px Verdana"
function measureText(txt, font) {
    var id = 'text-width-tester',
        $tag = $('#' + id);
    if (!$tag.length) {
        $tag = $('<span id="' + id + '" style="display:none;font:' + font + ';">' + txt + '</span>');
        $('body').append($tag);
    } else {
        $tag.css({font:font}).html(txt);
    }
    return {
        width: $tag.width(),
        height: $tag.height()
    }
}

var size = measureText("spam", "bold 12px Verdana");
console.log(size.width + ' x ' + size.height); // 35 x 12.6

您可以在此处看到这一点：

---

测试似乎表明，这有点令人不安，至少在Google Chrome中是这样，因为只使用完整的整数字体大小。使用基于

em

的字体声明，您可能会做得更好，尽管这可能有点棘手-您需要确保文本宽度测试仪的

1em

大小与输入的大小相同。

我从一大堆其他答案中选择了另一个。我认为这提供了最简单的一个属性更改解决方案

它可能过于冗长，或者为了清晰起见可以在某些方面进行重构，欢迎任何建议

$(document).ready(function(){

    // get the current styles size, in px integer.
    var maxSize = parseInt($('.fields').css("font-size"));

    function isOverflowed (element){

        if ( $(element)[0].scrollWidth > $(element).innerWidth() ) {
            return true;
        } else {
            return false;
        }
    };

    function decreaseSize (element){

        var fontSize = parseInt($(element).css("font-size"));
        fontSize = fontSize - 1 + "px";
        $(element).css({'font-size':fontSize});

    }

    function maximizeSize (element){

        var fontSize = parseInt($(element).css("font-size"));
        while (!isOverflowed(element) && fontSize < maxSize){
            fontSize = fontSize + 1 + "px";
            $(element).css({'font-size':fontSize});

            // if this loop increases beyond the width, decrease again. 
            // hacky.
            if (isOverflowed(element)){
                while (isOverflowed(element)) {
                    decreaseSize(element);
                }            
            }     

        }        

    }

    function fixSize (element){
        if (isOverflowed(element)){
            while (isOverflowed(element)) {
                decreaseSize(element);
            }            
        } else {
            maximizeSize(element);
        }
    }

    // execute it onready.
    $('.fields').each(function(){
        fixSize(this);
    });

    // bind to it.
    $(function() {
        $('.fields').keyup(function() {
            fixSize(this);
        })
    });    

});

$（文档）.ready（函数（）{
//获取当前样式大小，单位为px整数。
var maxSize=parseInt（$（'.fields'）.css（“字体大小”）；
功能已溢出（元素）{
if（$（元素）[0].scrollWidth>$（元素）.innerWidth（）{
返回true；
}否则{
返回false；
}
};
函数大小（元素）{
var fontSize=parseInt（$（元素）.css（“字体大小”）；
fontSize=fontSize-1+“px”；
$（元素）.css（{'font-size'：fontSize}）；
}
函数最大化（元素）{
var fontSize=parseInt（$（元素）.css（“字体大小”）；
而（！IsOverflow（元素）和&fontSize

真的，对于一个功能齐全且相对清晰的例子，你根本不喜欢你感兴趣的东西吗？不，根本不是这样。太好了，谢谢。我被法律问题（公司注册、商标、ToS和PP）缠住了，我已经两天没碰到这样的问题了。抱歉，升级投票延迟，并将此标记为已回答。谢谢！对不起，如果我是在发脾气-我感谢你的考虑。呵呵。NP再次感谢你帮我做这件事。这是一个非常好的效果。伟大的功能！我做了一些类似的东西，但没有那么整洁+1.另请参见，这看起来/感觉像是一个更优雅的解决方案。我在这里创建了一个JSFIDLE：另外，如果您希望在默认情况下将其应用于所有文本字段，则可以使用$（'input[type=text]'），而不是.fields。

$(document).ready(function(){

    // get the current styles size, in px integer.
    var maxSize = parseInt($('.fields').css("font-size"));

    function isOverflowed (element){

        if ( $(element)[0].scrollWidth > $(element).innerWidth() ) {
            return true;
        } else {
            return false;
        }
    };

    function decreaseSize (element){

        var fontSize = parseInt($(element).css("font-size"));
        fontSize = fontSize - 1 + "px";
        $(element).css({'font-size':fontSize});

    }

    function maximizeSize (element){

        var fontSize = parseInt($(element).css("font-size"));
        while (!isOverflowed(element) && fontSize < maxSize){
            fontSize = fontSize + 1 + "px";
            $(element).css({'font-size':fontSize});

            // if this loop increases beyond the width, decrease again. 
            // hacky.
            if (isOverflowed(element)){
                while (isOverflowed(element)) {
                    decreaseSize(element);
                }            
            }     

        }        

    }

    function fixSize (element){
        if (isOverflowed(element)){
            while (isOverflowed(element)) {
                decreaseSize(element);
            }            
        } else {
            maximizeSize(element);
        }
    }

    // execute it onready.
    $('.fields').each(function(){
        fixSize(this);
    });

    // bind to it.
    $(function() {
        $('.fields').keyup(function() {
            fixSize(this);
        })
    });    

});