Apples MobileMe verwendet Javascript, um die Schriftgröße im E-Mail-Login auf seiner Homepage zu ändern, wenn der Benutzer den Text so eingibt, dass der Text immer in den verfügbaren Platz passt, ohne dass das Überlaufscrollen auftritt.
Während ich sehen kann, wie man eine Funktion bei jedem Tastendruck ausführt, bin ich neugierig, wie man die Schriftgröße jedes Mal berechnen würde, damit sie immer in das Eingabefeld passt. Gibt es eine Möglichkeit, die Länge eines Textes mit einer Schriftart variabler Breite zu messen? Wie erreichen sie diesen Effekt?
Probieren Sie es aus, um zu sehen, was ich meine: Ссылка
Ich habe das in der Vergangenheit mit jQuery gemacht. Sie können die Größe eines Textes wie folgt messen:
%Vor% Um dies an einen gegebenen Platz anzupassen, ist es ein wenig komplizierter - Sie müssen die Deklaration font-size trennen und entsprechend skalieren. Je nachdem, wie Sie vorgehen, ist dies am einfachsten, wenn Sie die verschiedenen Teile der font -Deklaration auseinandernehmen. Eine Größenänderungsfunktion könnte wie folgt aussehen (offensichtlich ist dies jQuery-abhängig):
Sie können dies hier in Aktion sehen: Ссылка
Testing scheint zu zeigen, dass dies zumindest in Google Chrome ein wenig nervös ist, da nur ganzzahlige Schriftgrößen verwendet werden. Mit einer em -basierten Schriftartendeklaration können Sie möglicherweise bessere Ergebnisse erzielen. Dies ist jedoch möglicherweise etwas schwierig - Sie müssen sicherstellen, dass die 1em -Größe für den Textbreite-Tester die gleiche ist wie für die Eingabe .
Ich habe aus einem Sammelsurium anderer Antworten noch einen anderen gemacht. Ich denke, das bietet die einfachste Lösung für die Änderung der Eigenschaften.
Es ist wahrscheinlich zu ausführlich oder könnte für die Klarheit in gewisser Weise umgestaltet werden, irgendwelche Vorschläge willkommen!
%Vor%Tags und Links javascript javascript-events input user-input font-size