使用 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 calculating 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/

Try it out to see what I mean: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 缩小用户键入的字体大小以适应输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！