Schrumpfen font-size auf den ein Benutzer eingibt, um zu passen in eine Eingabe mit Javascript

Apples MobileMe verwendet javascript zum ändern der Schriftgröße in den E-Mail login auf der homepage als Benutzer-Typen, so dass der text immer passt in den verfügbaren Raum, ohne überlauf-scrollen.

Während ich kann sehen, wie, wie Sie eine Funktion ausführen, die auf jeden Tastendruck, ich bin gespannt, wie es einem gehen würde, zu berechnen die font-size jeder Zeit, so dass es immer passt in das Eingabefeld ein. Gibt es eine Möglichkeit, Messen Sie die Länge von einem Stück text mit einer variable Breite schriftart? Wie wollen Sie erreichen diesen Effekt?

Probieren Sie es aus, um zu sehen, was ich meine:
http://www.me.com/

InformationsquelleAutor Andrew De Andrade | 2011-05-24
  1. 27

    Ich habe dies in der Vergangenheit mithilfe von jQuery. Messen Sie die Größe von einem Stück text wie diesen:

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

    Damit passen diese zu einem bestimmten Platz, es ist ein wenig komplizierter - Sie müssen trennen die font-size Erklärung und Vergrößere es entsprechend. Je nachdem, wie Sie sind, Dinge zu tun, dies könnte am einfachsten sein, wenn Sie brechen die verschiedenen Teile des font Erklärung. Ein resize-Funktion könnte so Aussehen (wieder, dies ist offensichtlich jQuery-abhängig):

    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});
}

    Können Sie dies in Aktion zu sehen hier: http://jsfiddle.net/nrabinowitz/9BFQ8/5/

    Prüfung scheint zu zeigen, dass dies ein wenig nervös, zumindest in Google Chrome, da nur full-ganzzahlige Schriftgrößen verwendet werden. Möglicherweise können Sie besser mit einem em-basierte font-Deklaration, obwohl das vielleicht ein wenig schwierig - Sie brauchen, um sicherzustellen, dass die 1em Größe für die Breite des Textes tester ist die gleiche wie für den Eingang.

    • Wirklich, keine Liebe auf den alle für ein voll funktionsfähiges und relativ klares Beispiel für die genaue Sache, die Sie interessiert waren?
    • Nein, es ist nicht so, dass überhaupt. es ist perfekt, danke. Ich geriet in rechtlichen Fragen (Gründung, Marken -, ToS-und PP) und ich habe noch nicht reingeschaut in SO in zwei Tagen. Sorry für die Verspätung in upvote und markieren diese als beantwortet.
    • Danke! Sorry, wenn ich Gereizte - ich Schätze Ihre Aufmerksamkeit.
    • hehe. np. nochmals vielen Dank für die Hilfe mit diesem. Es ist ein sehr schöner Effekt.
    • Tolle Funktion! Ich habe etwas ähnlich wie diese, aber keinen Weg in der Nähe als ordentlich. +1.
    InformationsquelleAutor nrabinowitz
  2. 0

    Ich ein anderes aus einem Sammelsurium von anderen Antworten. Ich denke, dies stellt die einfachste one-property-change-Lösung.

    Ist es wahrscheinlich übermäßig ausführliche oder könnte umgestaltet werden, der für Klarheit in einige Möglichkeiten, Anregungen willkommen!

    $(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);
        })
    });    

});
    InformationsquelleAutor Ben
Schreibe einen Kommentar