Shrinking font-size at a user types to fit in an input using Javascript

by

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

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

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

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.

More Related Contents:

  1. JavaScript: Check if mouse button down?
  2. event.preventDefault() vs. return false
  3. What is DOM Event delegation?
  4. How can I trigger a JavaScript event click
  5. How to get the raw value an field?
  6. The value of “this” within the handler using addEventListener
  7. What exactly is the parameter e (event) and why pass it to JavaScript functions?
  8. How to get a word under cursor using JavaScript?
  9. Intercept page exit event
  10. Listening for variable changes in JavaScript
  11. How can I get the destination URL for the onbeforeunload event?
  12. How to check whether dynamically attached event listener exists or not?
  13. Reading client side text file using Javascript
  14. Accessing an object’s property from an event listener call in JavaScript
  15. Detect mousemove when over an iframe?
  16. How to delay calling of javascript function?
  17. How to detect in iOS webapp when switching back to Safari from background?
  18. link element onload
  19. Do Javascript promises block the stack
  20. Remove key press delay in Javascript
  21. Event Capturing vs Event Bubbling [duplicate]
  22. how to sum two numbers from input tag? [duplicate]
  23. Why can’t I get the input from the input box?
  24. Detecting an image 404 in Javascript
  25. Emulate jQuery “on” with selector in pure Javascript
  26. JavaScript: SyntaxError: missing ) after argument list
  27. Is dispatchEvent a sync or an async function
  28. How to detect if user has enabled full screen in browser
  29. What is the difference between Event.target, Event.toElement and Event.srcElement?
  30. HTML5 Canvas: Get Event when drawing is finished

Leave a Comment