缩小用户类型的字体大小以使用Javascript适合输入 [英] Shrinking font-size at a user types to fit in an input using Javascript

问题描述

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

Apple's MobileMe uses javascript to change the font size in the email login on its homepage as the user types so that the text always fits in the available space without overflow scrolling.

虽然我可以看到如何在每个按键上执行一个函数，但我很好奇每次如何调整字体大小以便它总是适合输入字段。有没有办法用可变宽度字体来测量一段文本的长度？他们如何实现这种效果？

While I can see how how to execute a function on each keypress, I'm curious how one would go about caluclating the font-size each time so that it always fits into the input field. Is there a way to measure the length of a piece of text with a variable width font? How do they accomplish this effect?

试试看我的意思：
http://www.me.com/

推荐答案

我过去使用过这个jQuery的。您可以像这样测量一段文字的大小：

I've done this in the past using jQuery. You can measure the size of a piece of text like this:

// 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

为了适应特定的空间，它有点棘手 - 你需要分离 font-size 声明并适当缩放。根据您的工作方式，如果您突破 font 声明的不同部分，这可能是最简单的。调整大小函数可能看起来像这样（显然，这是jQuery依赖的）：

In order to fit this to a given space, it's a little trickier - you need to separate out the font-size declaration and scale it appropriately. Depending on how you're doing things, this might be easiest if you break out the different parts of the font declaration. A resize function might look like this (again, obviously, this is jQuery-dependent):

function shrinkToFill(input, fontSize, fontWeight, fontFamily) {
    var $input = $(input),
        txt = $input.val(),
        maxWidth = $input.width() + 5, // add some padding
        font = fontWeight + " " + fontSize + "px " + fontFamily;
    // see how big the text is at the default size
    var textWidth = measureText(txt, font).width;
    if (textWidth > maxWidth) {
        // if it's too big, calculate a new font size
        // the extra .9 here makes up for some over-measures
        fontSize = fontSize * maxWidth / textWidth * .9;
        font = fontWeight + " " + fontSize + "px " + fontFamily;
        // and set the style on the input
        $input.css({font:font});
    } else {
        // in case the font size has been set small and 
        // the text was then deleted
        $input.css({font:font});
}

你可以在这里看到这个： http://jsfiddle.net/nrabinowitz/9BFQ8/5/

You can see this in action here: http://jsfiddle.net/nrabinowitz/9BFQ8/5/

测试似乎表明这有点跳跃，至少在谷歌浏览器中，因为只使用全整数字体大小。您可以使用基于 em 的字体声明做得更好，虽然这可能有点棘手 - 您需要确保文本宽度测试仪的1em 大小与输入的大小相同。

Testing seems to show that this is a little jumpy, at least in Google Chrome, because only full-integer font sizes are used. You might be able to do better with a em-based font declaration, though this might be a little tricky - you'd need to ensure that the 1em size for the text width tester is the same as that for the input.

这篇关于缩小用户类型的字体大小以使用Javascript适合输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！