Detect if text in an input (type=text) element exc

Question

Is there a way to detect if the content (value) of an input (type=text) element exceeds its size?

In Internet Explorer, the scrollWidth property will be larger than style.width when this is true. In Firefox however, scrollWidth always equals style.width and is a known bug ( https://bugzilla.mozilla.org/show_bug.cgi?id=343143 ), well maybe not bug because Mozilla simply doesn't consider an input element to be "scrollable", but still. In line with this opinion, Firefox's textarea element DOES properly set the scrollWidth property when the content overflows the bounds.

Currently, my only thoughts are to either: (a) Use a textarea element instead and limit it to single line input somehow or (b) On each keyup event of the input, copy the contents to a similarly shaped div element and look at its scrollWidth property.

Is there a better way to accomplish this in FF?

Answer 1

what if you measure the string's length in pixels? then you could compare the input's width with it.
Here is how you can get the pixel length of a string with jquery : Determine Pixel Length of String in Javascript/jQuery? .
I would do something like :

function inputExceeded(el){
    var s = $('<span >'+el.val()+'</span>');
    s.css({
       position : 'absolute',
       left : -9999,
       top : -9999,
       // ensure that the span has same font properties as the element
       'font-family' : el.css('font-family'),
       'font-size' : el.css('font-size'),
       'font-weight' : el.css('font-weight'),
       'font-style' : el.css('font-style')
    });
    $('body').append(s);
    var result = s.width() > el.width();
    //remove the newly created span
    s.remove();
    return result;
}

Answer 2

I know this is an old-ish question, but maybe this will help someone. jQuery will fire a 'scroll' event if the entered text is wider than the input's width. Unfortunately, the 'scroll' event doesn't fire if text is injected into the input with JavaScript. Also, this example doesn't shrink the input if the user reduces the text.

$('input[type=text]').on('scroll.input-expander', function(event, element){
   $(this).css('width','100%');
   $(this).unbind('scroll.input-expander');
});

Edit: I just realized that the scroll event is only triggered when the cursor goes beyond the edge of the input.