title: Detect if text in an input (type=text) element exceeds bounds in FireFox
body: <p>Is there a way to detect if the content (value) of an input (type=text) element exceeds its size?</p>
  
  <p>In Internet Explorer, the <code>scrollWidth</code> property will be larger than <code>style.width</code> when this is true. In Firefox however, <code>scrollWidth</code> always equals <code>style.width</code> and is a known bug ( <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=343143" rel="noreferrer">https://bugzilla.mozilla.org/show_bug.cgi?id=343143</a> ), 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 <code>textarea</code> element DOES properly set the <code>scrollWidth</code> property when the content overflows the bounds.</p>
  
  <p>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 <code>scrollWidth</code> property.</p>
  
  <p>Is there a better way to accomplish this in FF? </p>