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 ( .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 acplish this in FF?

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/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 acplish this in FF?

• javascript
• html
• firefox
• dom
• input

Share Improve this question Follow asked Jan 29, 2011 at 1:12 userxuserx 3,81511 gold badge2525 silver badges3434 bronze badges 2

• how about paring the length of the string with the size attribute of the textbox? – jrn.ak Commented Jan 29, 2011 at 1:29
• @jnpcl - This only would work if using a fixed width font and css styling on the input element was not in use. For a variable width font or cases where you want to explicitly define the width of an input element (e.g. style="width:100px;"), checking the length wouldn't be sufficient. – userx Commented Jan 29, 2011 at 21:19

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 13

what if you measure the string's length in pixels? then you could pare 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;
}

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.