Detect if text in an input (type=text) element exceeds bounds in FireFox

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?

how about comparing the `length` of the string with the `size` attribute of the textbox? — drudge, Jan 29 '11 at 01: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, Jan 29 '11 at 21:19

score 13 · Accepted Answer · edited May 23 '17 at 10:31

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

I like this answer, but any idea how reliable of a solution this is? I don't know what jQuery's `width()` function is looking at (CSS's `style.width`, `offsetWidth`, `clientWidth`, etc), but I do know that some CSS properties won't have a value unless set. — userx, Jan 29 '11 at 19:43

ErikPhipps · Answer 2 · 2012-08-01T21:52:40.680

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.

Detect if text in an input (type=text) element exceeds bounds in FireFox

2 Answers2

Linked