I'm encountering an odd display bug with input boxes that affects Internet Explorer, and I can't find a workaround to the issue. Here is a JSFiddle that shows my code:
http://jsfiddle.net/HKRJY/2/
The code captures keypress events on the input box and alters the output. It is used for forcing uppercase entry, or preventing numbers from being input, etc. The problem is on lines 16-23. On Firefox and Chrome, this code ensures that the caret position of the input box is always in view when the content is longer than the visible area. On Internet Explorer, this doesn't work. If you want to see what you have typed, you have to press an arrow key to force IE to redraw the input box correctly.
The amusing thing is that if you view that JSFiddle in IE, you won't see the bug. For some reason, being inside an iframe makes it work correctly. If you view just the contents of the iframe, you can see the bug in action:
http://jsfiddle.net/HKRJY/2/show/
Is there any way to force IE to render the input box correctly? I know that if the input box receives an arrow key event, it draws correctly, but I don't think there is a way to emulate that in IE. Does anybody else have any ideas?