Text Resize as the user types

Question

So I've searched a ton of sites, and what I am looking for is, as the user types, the text automatically resizezs smaller (or larger, if they delete something).

For an example, as well as the other code I'm using, you can visit http://twmorton.com/magicpreviewjquery/

Thanks!

Answer 1

Just put an event on .keydown() which will check the length of .text() inside the element and resize it accordingly

Answer 2

You could try some simple algorithm like this:

$(function() {
    var $in = $("#in"),                                     // <== could be a div
        w = $in.width();
    $in.css("font-size", 20*30/$in.text().length);
    $in.click(function() {
        this.contentEditable='true';
    });
    $(document).keyup(function() {

        $in.css("font-size", 20*30/$in.text().length);       // <== Resizing algo

    });
});​

Try it out with this jsFiddle