Detect when text field content exceeds width?
This question relates to input type="text", and not textareas. I need to detect when the content of a text input is too long to be displayed within the box.
Using the length (character count) of the content isn't good enough, because the font isn't monospaced - "iiiiiiiiii" will fire too early and "mmmmmmmmmmm" will fire too late. Essentially, I need to compare the actual pixel length of field.value to the actual pixel width of the input field.
In IE7, testing for field.scrollWidth > field.offsetWidth works. But in Firefox these values are both the same, regardless of the content length.
Is there another way of doing this that I've missed? I only have to make this work in FF2/3 and IE7.
Using the length (character count) of the content isn't good enough, because the font isn't monospaced - "iiiiiiiiii" will fire too early and "mmmmmmmmmmm" will fire too late. Essentially, I need to compare the actual pixel length of field.value to the actual pixel width of the input field.
In IE7, testing for field.scrollWidth > field.offsetWidth works. But in Firefox these values are both the same, regardless of the content length.
Is there another way of doing this that I've missed? I only have to make this work in FF2/3 and IE7.
