Show beginning of HTML input value on blur with JavaScript

Question

I have a fixed width input of type text. If the user was to enter a long value into this field I would like the beginning of the value to be shown when the input no longer has focus.

Default behaviour in FF and IE leaves the view of the field value in the same state. Chrome on the other hand seems to behave as I want, it shows the beginning of the value.

I have tried to reset the caret position in IE through the textRange object's Select() method but this seems to re-invoke the blur event resulting in recursive chain (not sure why, but that's a separate issue).

Does anyone have any suggestions? There must be an easy way to do this?

Answer 1

I rigged this code together, it works on IE8. The setTimeout of 1ms is because IE automatically shows the second value if a textbox's value is set twice in a row(surprising):

function resetPosition(element){
    var v = element.value;
    element.value="";
    setTimeout(function(){element.value = v;},1);
}

Also tested on IE7, and unobtrusive on Chrome(which does it automatically).